글꼴 (@ font-face)이 이미로드되었는지 확인하는 방법은 무엇입니까?
Font-Awesome을 사용하고 있는데 글꼴 파일이로드되지 않은 상태에서 아이콘이 로 나타납니다.
따라서 display:none파일이로드되지 않는 동안 이러한 아이콘이 있어야 합니다.
@font-face {
font-family: "FontAwesome";
src: url('../font/fontawesome-webfont.eot');
src: url('../font/fontawesome-webfont.eot?#iefix') format('eot'), url('../font/fontawesome-webfont.woff') format('woff'), url('../font/fontawesome-webfont.ttf') format('truetype'), url('../font/fontawesome-webfont.svg#FontAwesome') format('svg');
font-weight: normal;
font-style: normal;
}
이러한 파일이로드되었고 마침내 아이콘을 표시 할 수 있는지 어떻게 알 수 있습니까?
편집 : 글꼴이 전체 페이지보다 먼저로드 될 수 있기 때문에 페이지가로드 될 때 (onload) 말하는 것이 아닙니다.
이제 GitHub에서 : https://github.com/patrickmarabeas/jQuery-FontSpy.js
기본적으로이 방법은 서로 다른 두 글꼴의 문자열 너비를 비교하여 작동합니다. 우리는 Comic Sans를 테스트 할 글꼴로 사용하고 있습니다. 웹 안전 글꼴 중 가장 다르고 사용할 사용자 정의 글꼴과는 충분히 다르기 때문입니다. 또한 우리는 매우 큰 글꼴 크기를 사용하므로 작은 차이도 분명합니다. Comic Sans 문자열의 너비가 계산되면 글꼴 모음이 Comic Sans로 대체되는 사용자 정의 글꼴로 변경됩니다. 선택하면 문자열 요소 너비가 동일하면 Comic Sans의 대체 글꼴이 계속 사용됩니다. 그렇지 않은 경우 글꼴이 작동합니다.
글꼴로드 감지 방법을 개발자에게 글꼴로드 여부에 따라 요소 스타일을 지정할 수 있도록 설계된 jQuery 플러그인으로 다시 작성했습니다. 사용자 지정 글꼴이로드되지 않는 경우 사용자가 콘텐츠없이 남아 있지 않도록 안전 타이머가 추가되었습니다. 그것은 단지 나쁜 사용성입니다.
또한 클래스 추가 및 제거를 포함하여 글꼴로드 및 실패시 발생하는 작업에 대한 더 많은 제어를 추가했습니다. 이제 글꼴에 원하는대로 할 수 있습니다. 글꼴 크기, 줄 간격 등을 수정하여 대체 글꼴을 가능한 한 사용자 지정에 가깝게 수정하여 레이아웃이 그대로 유지되고 사용자가 예상되는 경험을 얻을 수 있도록하는 것이 좋습니다.
데모 : http://patrickmarabeas.github.io/jQuery-FontSpy.js
다음을 .js 파일에 넣고 참조하십시오.
(function($) {
$.fontSpy = function( element, conf ) {
var $element = $(element);
var defaults = {
font: $element.css("font-family"),
onLoad: '',
onFail: '',
testFont: 'Comic Sans MS',
testString: 'QW@HhsXJ',
delay: 50,
timeOut: 2500
};
var config = $.extend( defaults, conf );
var tester = document.createElement('span');
tester.style.position = 'absolute';
tester.style.top = '-9999px';
tester.style.left = '-9999px';
tester.style.visibility = 'hidden';
tester.style.fontFamily = config.testFont;
tester.style.fontSize = '250px';
tester.innerHTML = config.testString;
document.body.appendChild(tester);
var fallbackFontWidth = tester.offsetWidth;
tester.style.fontFamily = config.font + ',' + config.testFont;
function checkFont() {
var loadedFontWidth = tester.offsetWidth;
if (fallbackFontWidth === loadedFontWidth){
if(config.timeOut < 0) {
$element.removeClass(config.onLoad);
$element.addClass(config.onFail);
console.log('failure');
}
else {
$element.addClass(config.onLoad);
setTimeout(checkFont, config.delay);
config.timeOut = config.timeOut - config.delay;
}
}
else {
$element.removeClass(config.onLoad);
}
}
checkFont();
};
$.fn.fontSpy = function(config) {
return this.each(function() {
if (undefined == $(this).data('fontSpy')) {
var plugin = new $.fontSpy(this, config);
$(this).data('fontSpy', plugin);
}
});
};
})(jQuery);
프로젝트에 적용
.bannerTextChecked {
font-family: "Lobster";
/* don't specify fallback font here, do this in onFail class */
}
$(document).ready(function() {
$('.bannerTextChecked').fontSpy({
onLoad: 'hideMe',
onFail: 'fontFail anotherClass'
});
});
그 FOUC를 제거하십시오!
.hideMe {
visibility: hidden !important;
}
.fontFail {
visibility: visible !important;
/* fall back font */
/* necessary styling so fallback font doesn't break your layout */
}
편집 : 제대로 작동하지 않고 다른 버전에서 문제가 발생하여 FontAwesome 호환성이 제거되었습니다. 해키 수정은 여기에서 찾을 수 있습니다 : https://github.com/patrickmarabeas/jQuery-FontFaceSpy.js/issues/1
시도 WebFont 로더 ( GitHub의의의 repo 구글과 Typekit에서 개발을).
이 예제는 먼저 기본 serif 글꼴로 텍스트를 표시합니다. 그런 다음 글꼴이로드 된 후 지정된 글꼴로 텍스트를 표시합니다. (이 코드는 다른 모든 최신 브라우저에서 Firefox의 기본 동작을 재현합니다.)
여기에 다른 솔루션과 다른 접근 방식이 있습니다.
WebGL 텍스처를 빌드하기 위해 FontAwesome 4.1.0을 사용하고 있습니다. 그래서 작은 캔버스를 사용하여 fa-square를 렌더링 한 다음 해당 캔버스의 픽셀을 확인하여로드되었는지 여부를 테스트하는 아이디어를 얻었습니다.
function waitForFontAwesome( callback ) {
var retries = 5;
var checkReady = function() {
var canvas, context;
retries -= 1;
canvas = document.createElement('canvas');
canvas.width = 20;
canvas.height = 20;
context = canvas.getContext('2d');
context.fillStyle = 'rgba(0,0,0,1.0)';
context.fillRect( 0, 0, 20, 20 );
context.font = '16pt FontAwesome';
context.textAlign = 'center';
context.fillStyle = 'rgba(255,255,255,1.0)';
context.fillText( '\uf0c8', 10, 18 );
var data = context.getImageData( 2, 10, 1, 1 ).data;
if ( data[0] !== 255 && data[1] !== 255 && data[2] !== 255 ) {
console.log( "FontAwesome is not yet available, retrying ..." );
if ( retries > 0 ) {
setTimeout( checkReady, 200 );
}
} else {
console.log( "FontAwesome is loaded" );
if ( typeof callback === 'function' ) {
callback();
}
}
}
checkReady();
};
캔버스를 사용하기 때문에 상당히 현대적인 브라우저가 필요하지만 IE8에서도 폴리 필과 함께 작동 할 수 있습니다.
타이머를 전혀 사용하지 않고 @ font-face가 이미로드되었는지 확인하는 또 다른 방법은 다음과 같습니다. 신중하게 제작 된 요소의 크기가 변경 될 때 즉각적인 이벤트를 수신하려면 "스크롤"이벤트를 활용하십시오.
나는 그것이 어떻게 끝났는지에 대한 블로그 게시물을 썼고 Github에 라이브러리를 게시했습니다 .
같은 것을 시도하십시오
$(window).bind("load", function() {
$('#text').addClass('shown');
});
그리고
#text {visibility: hidden;}
#text.shown {visibility: visible;}
글꼴이로드 된 후 load 이벤트가 발생해야합니다.
This is an alternate approach that will at least ensure that font-awesome is loaded, NOT a complete solution to the OP. Original code found in the wordpress forums here https://wordpress.stackexchange.com/a/165358/40636.
It's agnostic and will work with any font style resource like font-awesome where a font-family can be checked. With a little more thought I bet this could be applied to much more...
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<script>
(function($){
var faSpan = $('<span class="fa" style="display:none"></span>').appendTo('body');
if (faSpan .css('fontFamily') !== 'FontAwesome' ) {
// Fallback Link
$('head').append('<link href="/css/font-awesome.min.css" rel="stylesheet">');
}
faSpan.remove();
})(jQuery);
</script>
Use the below code:
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<canvas id="canvasFont" width="40px" height="40px" style="position: absolute; display: none;"></canvas>
<script>
function IsLoadedFonts()
{
var Args = arguments;
var obj = document.getElementById('canvasFont');
var ctx = obj.getContext("2d");
var baseFont = (/chrome/i.test(navigator.userAgent))?'tims new roman':'arial';
//................
function getImg(fon)
{
ctx.clearRect(0, 0, (obj).width, (obj).height);
ctx.fillStyle = 'rgba(0,0,0,1.0)';
ctx.fillRect( 0, 0, 40, 40 );
ctx.font = '20px '+ fon;
ctx.textBaseline = "top";
ctx.fillStyle = 'rgba(255,255,255,1.0)';
ctx.fillText( '\u0630', 18, 5 );
return ctx.getImageData( 0, 0, 40, 40 );
};
//..............
for(var i1=0; i1<Args.length; i1++)
{
data1 = getImg(Args[i1]);
data2 = getImg(baseFont);
var isLoaded = false;
//...........
for (var i=0; i<data1.data.length; i++)
{
if(data1.data[i] != data2.data[i])
{isLoaded = true; break;}
}
//..........
if(!isLoaded)
return false;
}
return true;
};
setTimeout(function(){alert(IsLoadedFonts('myfont'));},100);
</script>
</body>
Can check many fonts:
setTimeout(function(){alert(IsLoadedFonts('font1','font2','font3'));},100);
The below code works in opera only but is easy:
if(!document.defaultView.getComputedStyle(document.getElementById('mydiv'))['fontFamily'].match(/myfont/i))
alert("font do not loaded ");
참고URL : https://stackoverflow.com/questions/12312323/how-to-know-if-a-font-font-face-has-already-been-loaded
'Programing' 카테고리의 다른 글
| 프로덕션 Node.js 서버 배포 (0) | 2020.10.20 |
|---|---|
| Mockito, JUnit 및 Spring (0) | 2020.10.20 |
| Python 패키지 및 egg-info 디렉토리 (0) | 2020.10.20 |
| 임의의 유리수에 대한 "숫자 추측"게임? (0) | 2020.10.20 |
| 개발 중에 코드 중복을 감지하는 방법은 무엇입니까? (0) | 2020.10.20 |