Preloading @font-face fonts?

StackOverflow https://stackoverflow.com/questions/1330825

문제

페이지가로드되기 전에 JavaScript와 함께 @font-face fonts, pont-face fonts를 사전로드하거나 다른 방식으로로드 할 수 있습니까?

도움이 되었습니까?

해결책

글꼴로드로 깜박임을 피하려는 현재 기술을 알지 못하지만 글꼴에 적절한 캐시 헤더를 보내고 해당 요청이 가능한 빨리 진행되는지 확인하여 최소화 할 수 있습니다.

다른 팁

간단한 기술은 이것을 색인 어딘가에 두는 것입니다.

<div class="font_preload" style="opacity: 0">
    <span style="font-family: 'myfontface#1font-family', Arial, sans-serif;"></span>
    <span style="font-family: 'myfontface#2font-family', Arial, sans-serif;"></span>
    ...
</div>

Chrome 34, Safari 7 및 FF 29 및 IE 11에서 테스트

여기에는 "프리로드"를위한 몇 가지 기술이 있습니다.http://paulirish.com/2009/fighting-the-font-face-fout/

브라우저를 최대한 빨리 다운로드하도록 브라우저를 속이고 ..

또한 데이터가 많은 도움을 줄 수 있습니다. 또한 페이지 내용을 숨기고 준비되면 표시 할 수 있습니다.

2017 : 지금 가지고 있습니다 예압

MDN : 요소 rel 속성의 예압 값을 사용하면 HTML에 선언적 페치 요청을 작성할 수 있으므로로드 직후에 페이지가 필요한 리소스를 지정할 수 있으므로 페이지로드의 수명주기 초기에 예압을 시작하려고합니다. 브라우저의 주요 렌더링 기계가 시작됩니다. 이렇게하면 더 일찍 사용할 수있게되며 페이지의 첫 렌더링을 차단할 가능성이 적어 성능이 향상됩니다.

<link rel="preload" href="/fonts/myfont.eot" as="font" crossorigin="anonymous" />

확인하다 브라우저 호환성.

글꼴 예압에 가장 유용합니다 (브라우저가 일부 CSS에서 찾을 때까지 기다리지 않음). 일부 로고, 아이콘 및 스크립트를 사전로드 할 수도 있습니다.

다른 기술 프로/단점에 대해 논의합니다 여기 (내 블로그가 아님).

적절한 글꼴 사전 로딩은 HTML5 사양의 큰 구멍입니다. 나는이 모든 것들을 겪었고 내가 찾은 가장 신뢰할 수있는 솔루션은 font.js를 사용하는 것입니다.

http://pomax.nihongoresources.com/pages/font.js/

이미지를로드하는 데 사용하는 것과 동일한 API를 사용하여 글꼴을로드하는 데 사용할 수 있습니다.

var anyFont = new Font();
anyFont.src = "fonts/fileName.otf";
anyFont.onload = function () {
  console.log("font loaded");
}

보다 훨씬 간단하고 가볍습니다 Google의 Hulking WebFont 로더

Font.js의 Github Repo는 다음과 같습니다.

https://github.com/pomax/font.js

이것 문제를 해결해야합니다.

초기 질문에 답하기 위해 : 그래 넌 할수있어. 그래도 Gecko 및 WebKit 브라우저 만 현재 지원합니다.
머리에 링크 태그를 추가하면됩니다.

<link rel="prefetch" href="pathto/font">
<link rel="prerender" href="pathto/page">

Google을 통해 WebFontloader 

var fontDownloadCount = 0;
WebFont.load({
    custom: {
        families: ['fontfamily1', 'fontfamily2']
    },
    fontinactive: function() {
        fontDownloadCount++;
        if (fontDownloadCount == 2) {
            // all fonts have been loaded and now you can do what you want
        }
    }
});

나는 메인 문서에 편지를 추가하여 이것을했고 투명하게 만들고로드하고 싶은 글꼴을 할당했습니다.

예를 들어

<p>normal text from within page here and then followed by:
<span style="font-family:'Arial Rounded Bold'; color:transparent;">t</span>
</p>

표준을 사용하십시오 CSS 글꼴 로딩 API.

기다립니다 (모두)로드 할 글꼴을 한 다음 콘텐츠를 표시합니다.

document.fonts.ready.then((fontFaceSet) => {
    console.log(fontFaceSet.size, 'FontFaces loaded.');
    document.getElementById('waitScreen').style.display = 'none';
});

데모 코드펜.

최근에 나는 캔버스 요소에 DOM Limited와 함께 Cocoonjs와 호환되는 게임을하고있었습니다. 여기에 내 접근 방식이 있습니다.

FillText를 사용하여로드되지 않았지만 아직 실행되지는 않지만 시각적 피드백이 없어야합니다. 따라서 캔버스 평면은 손상되지 않습니다. 캔버스를 정기적으로 확인하는 것입니다 (예 : GetImageData를 통한 루핑과 같은 캔버스는 글꼴이 제대로로드 될 때 발생하는 투명하지 않은 픽셀).

최근 기사 에서이 기술을 조금 더 설명했습니다. http://rezoner.net/preloading-font-face-using-canvas,686

Google에는이를위한 멋진 라이브러리가 있습니다. https://developers.google.com/webfonts/docs/webfont_loader거의 모든 글꼴을 사용할 수 있으며 LIB는 HTML 태그에 클래스를 추가합니다.

CERRTRAIN 글꼴이로드되고 활성화 될 때 심지어 JavaScript 이벤트를 제공합니다!

당신의 fontfiles를 제공하는 것을 잊지 마십시오! 그것은 확실히 속도를 높일 것입니다!

내가 찾은 가장 좋은 방법은 글꼴면이 포함 된 스타일 시트를 사전로드 한 다음 브라우저에 자동으로로드하도록하는 것입니다. 다른 위치 (HTML 페이지)에서 글꼴을 사용했지만 글꼴 변경 효과를 간단히 관찰 할 수있었습니다. 

<link href="fonts.css?family=Open+Sans" rel="preload stylesheet" as="style">

그런 다음 font.css 파일에서 다음과 같이 지정하십시오.

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans Regular'), local('OpenSans-Regular'),
       url('open-sans-v16-latin-regular.woff2') format('woff2'); /*  Super Modern Browsers */
}

링크 태그를 통해 사전로드 될 때 글꼴에 이름을 할당 할 수는 없습니다 (내가 잘못한 경우 아직 방법을 찾을 수 없음). 따라서 글꼴에 글꼴을 할당하려면 글꼴을 사용해야합니다. 링크 태그를 통해 글꼴을로드 할 수는 있지만 이름을 글꼴에 할당 할 수 없으므로 권장되지 않습니다. Font-Face와 같은 이름이 없으면 웹 페이지의 어느 곳에서나 사용할 수 없습니다. Gtmetrix에 따르면, 스타일 시트는 처음에 스크립트/스타일의 나머지 부분을 순서로로드 한 다음 DOM이로드되기 전에 글꼴이로드되므로 글꼴 변경 효과가 표시되지 않습니다.

머리는 다음과 같이 예압 Rel을 포함해야합니다.

<head>
    ...
    <link rel="preload" as="font" href="/somefolder/font-one.woff2">
    <link rel="preload" as="font" href="/somefolder/font-two.woff2">
</head>

이러한 방식으로 WOFF2는 예압을 지원하는 브라우저로 사전로드되며 모든 폴백 형식은 평소와 같이로드됩니다.
그리고 당신의 CSS 글꼴 얼굴은 이것과 비슷해 보일 것입니다.

@font-face {
    font-family: FontOne;
    src: url(../somefolder/font-one.eot);
    src: url(../somefolder/font-one.eot?#iefix) format('embedded-opentype'),
    url(../somefolder/font-one.woff2) format('woff2'), //Will be preloaded
    url(../somefolder/font-one.woff) format('woff'),
    url(../somefolder/font-one.ttf)  format('truetype'),
    url(../somefolder/font-one.svg#svgFontName) format('svg'); 
}
@font-face {
    font-family: FontTwo;
    src: url(../somefolder/font-two.eot);
    src: url(../somefolder/font-two.eot?#iefix) format('embedded-opentype'),
    url(../somefolder/font-two.woff2) format('woff2'), //Will be preloaded
    url(../somefolder/font-two.woff) format('woff'),
    url(../somefolder/font-two.ttf)  format('truetype'),
    url(../somefolder/font-two.svg#svgFontName) format('svg');
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top