글쎄, 당신이 이후에

… 여기서 모범 사례를 찾으면 성능이 중요하지만 확장 성과 사용 편의성도 중요합니다. 외모와 느낌은 말할 것도 없습니다.

대답은 (웹 디자인에서 항상 그렇듯이) : 상황 에 따라 다릅니다!

한 가지 확실한 것은 JS 접근 방식을 사용하지 않는 것이 좋습니다 (두 번째 예제에 표시됨).

개인적으로 저는 대다수의 사용자가 사용하도록 설정 했음에도 불구하고 Javascript에 따라 표현적인 것과 CSS 스타일을 만드는 것을 싫어합니다. 혼합하지 않는 문제입니다.

그리고 주어진 예에서 볼 수 있듯이 글꼴을 사용할 수 있기 전에 페이지가 이미 브라우저에 의해 렌더링 되었기 때문에 일종의 FOUC (스타일이 지정되지 않은 콘텐츠의 플래그)가 있습니다. 그대로 페이지가 다시 그려집니다. 그리고 사이트가 클수록 (성능) 영향이 커집니다!

따라서 글꼴 임베딩에 JS 솔루션을 사용하지 않습니다.

이제 순수한 CSS 메서드를 살펴 보겠습니다.
꽤 오랫동안 여기에 “vs. @import”에 대한 논의가 있습니다. 개인적으로 @import 사용을 피하고 항상 사용하는 것을 선호합니다.<link> 합니다. 그러나 이것은 주로 개인적인 취향의 문제입니다. 절대로하지 말아야 할 한 가지는 둘 다 섞는 것입니다!

로컬 대 CDN
글꼴 파일을 로컬로 호스팅할지 또는 CDN을 사용할지 결정할 때 대부분 다른 글꼴 수와 포함하려는 각 글꼴에 따라 다릅니다.

이것이 왜 중요하거나 역할을합니까?
성능 측면에서 볼 때 스타일 시트에 인코딩 된 Base64 글꼴을 포함하는 것이 좋습니다. 그러나 거의 모든 최신 브라우저에서 사용되는 .woff 형식 만이 대부분의 방문자를 의미합니다. 다른 모든 사용자의 경우 추가 요청이 있습니다.

그러나 Base64 인코딩으로 인한 “오버 헤드”와 글꼴 파일의 크기 (.woff 형식 포함) 때문에이 기술은 3 개 또는 4 개 이하의 다른 글꼴이있는 경우에만 사용해야합니다. 그리고 서버가 gzip으로 압축 된 (CSS) 파일을 전달하는지 항상 확인하십시오.

이렇게하면 큰 장점은 글꼴 파일에 대한 추가 요청이 없다는 것입니다. 그리고 첫 페이지로드 후 (사이트의 어느 페이지에 관계없이) CSS 파일이 캐시됩니다. 이것은 HTML5 애플리케이션 캐시를 사용하는 경우에도 이점입니다 (확실히 수행 할 것임).

저자가 자신의 사이트에서 최대 3 ~ 4 개의 다른 글꼴을 사용해서는 안된다는 사실 외에도 Google의 CDN을 사용하는 방법을 살펴 보겠습니다.

먼저 다음 <link>과 같이 원하는 모든 글꼴을 하나의 단일으로 포함 할 수 있으며 항상 포함해야합니다 .

<link href='http://fonts.googleapis.com/css?family=PT+Serif:400,700,400italic,700italic|PT+Sans:400,700,400italic,700italic|Montez' rel='stylesheet' type='text/css'>

결과는 다음과 같습니다.

@font-face {
  font-family: 'Montez';
  font-style: normal;
  font-weight: 400;
  src: local('Montez'), local('Montez-Regular'), url(http://themes.googleusercontent.com/static/fonts/montez/v4/Zfcl-OLECD6-4EcdWMp-Tw.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 400;
  src: local('PT Sans'), local('PTSans-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/LKf8nhXsWg5ybwEGXk8UBQ.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: normal;
  font-weight: 700;
  src: local('PT Sans Bold'), local('PTSans-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/0XxGQsSc1g4rdRdjJKZrNBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 400;
  src: local('PT Sans Italic'), local('PTSans-Italic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/PIPMHY90P7jtyjpXuZ2cLD8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'PT Sans';
  font-style: italic;
  font-weight: 700;
  src: local('PT Sans Bold Italic'), local('PTSans-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/lILlYDvubYemzYzN7GbLkHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 400;
  src: local('PT Serif'), local('PTSerif-Regular'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/sDRi4fY9bOiJUbgq53yZCfesZW2xOQ-xsNqO47m55DA.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: normal;
  font-weight: 700;
  src: local('PT Serif Bold'), local('PTSerif-Bold'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/QABk9IxT-LFTJ_dQzv7xpIbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 400;
  src: local('PT Serif Italic'), local('PTSerif-Italic'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/03aPdn7fFF3H6ngCgAlQzBsxEYwM7FgeyaSgU71cLG0.woff) format('woff');
}
@font-face {
  font-family: 'PT Serif';
  font-style: italic;
  font-weight: 700;
  src: local('PT Serif Bold Italic'), local('PTSerif-BoldItalic'), url(http://themes.googleusercontent.com/static/fonts/ptserif/v6/Foydq9xJp--nfYIx2TBz9QFhaRv2pGgT5Kf0An0s4MM.woff) format('woff');
}

보시다시피 9 개의 서로 다른 글꼴 파일이 있습니다. 즉, 사용자가 요청 된 글꼴 중 하나 이상이 로컬에 설치되어 있지 않은 경우 총 10 개의 요청 (링크 요소 중 하나 포함)을 의미합니다. 그리고 이러한 요청은 사이트에 대한 모든 새 페이지 요청마다 반복됩니다 (더 이상 데이터가 전송되지 않음)! 또한의 요청에 대한 응답 <link>은 캐시되지 않습니다.

권장 사항 :
결국 스타일 시트에 인코딩 된 .woff 형식의 Base64로 글꼴 파일을 포함하는 것이 좋습니다.

이를 수행하는 방법에 대한 예제와 설명은 이 멋진 기사 를 참조하십시오 !

답변

<link href="http://fonts.googleapis.com/css?family=Open+Sans&subset=latin" rel="stylesheet">

<!-- Only serve H,W,e,l,o,r and d -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans&text=HelloWorld" rel="stylesheet">

<script>
    (function() {
        var font = document.createElement('link');
        font.type = 'text/css';
        font.rel = 'stylesheet';
        font.href = '/url/to/font.css';
        var s = document.getElementsByTagName('link')[0];
        s.parentNode.insertBefore(font, s);
      })();
</script>