Google Web Fonts 링크 또는 가져 오기를 포함합니까?
Google 웹 글꼴을 페이지에 포함시키는 기본 방법은 무엇입니까?
링크 태그를 통해?
<link href = 'http : //fonts.googleapis.com/css? family = Judson : 400,400italic, 700'rel = 'stylesheet'type = 'text / css'>
스타일 시트로 가져 오기를 통해?
@import url (http://fonts.googleapis.com/css?family=Kameron:400,700);
또는 웹 글꼴 로더를 사용하십시오
사례의 90 % 이상이 <link>태그를 원할 것 입니다. 일반적으로 @import파일을 가져올 때까지 포함 된 리소스의로드를 지연시키기 때문에 규칙 을 피하려고합니다 . @import를 "평평하게하는"빌드 프로세스가있는 경우 웹 글꼴에 다른 문제가 발생합니다. : Google WebFonts와 같은 동적 공급자는 플랫폼 별 글꼴 버전을 제공하므로 단순히 콘텐츠를 인라인하면 일부 플랫폼에서 글꼴이 깨집니다.
이제 웹 글꼴 로더를 사용하는 이유는 무엇입니까? 글꼴로드 방법을 완전히 제어 해야하는 경우 대부분의 브라우저는 모든 CSS를 다운로드하여 적용 할 때까지 화면에 내용을 그리는 것을 연기합니다. "스타일이없는 내용의 플래시"문제를 피할 수 있습니다. 단점은 .. 내용이 보일 때까지 추가로 일시 정지하고 지연 될 수 있습니다. JS 로더를 사용하면 글꼴이 표시되는 방법과시기를 정의 할 수 있습니다. 예를 들어, 원본 내용이 화면에 그려진 후에 페이드 인 할 수도 있습니다.
다시 한 번, 90 %의 사례가 <link>태그입니다. 좋은 CDN을 사용하면 글꼴이 더 빨리 내려 와서 캐시에서 제공 될 가능성이 높습니다.
자세한 내용과 Google 웹 글꼴에 대한 자세한 내용은이 GDL 비디오를 확인하십시오.
<link>글꼴에 버전이 있기 때문에 Google 에서 제공하는 글꼴을 사용하지만 HTML5의 사전 연결 기능을 사용하여 브라우저에서 TCP 연결을 열고 fonts.gstatic.com과 SSL을 미리 협상하도록 요청하십시오. 다음은 <head></head>태그 에 있어야하는 예입니다 .
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link href="https://fonts.googleapis.com/css?family=Roboto&display=swap" rel="stylesheet">
SEO와 성능에 관심이 있다면 Link를 사용하는 것이 좋습니다. 사전로드를 사용하여 사전로드 할 수 있기 때문입니다.
예:
<link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2" as="font" crossorigin>
<link rel="preload" href="https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2" as="font" crossorigin>
<style>
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(https://fonts.gstatic.com/s/lato/v14/S6uyw4BMUTPHjx4wXiWtFCc.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Quicksand';
font-style: normal;
font-weight: 400;
src: local('Quicksand Regular'), local('Quicksand-Regular'), url(https://fonts.gstatic.com/s/quicksand/v7/6xKtdSZaM9iE8KbpRA_hK1QNYuDyPw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
</style>
자세한 내용은 https://ashton.codes/preload-google-fonts-using-resource-hints/를 참조하십시오.
요청 시간을 절약 할 수 있습니다
... 추가 코딩 시간이 걸리는 경우.
실제로 큰 문제는 아니며 Google의 간단한 한 줄 링크를 열면됩니다.
http://fonts.googleapis.com/css?family=Kameron:400,700
그리고 그것이 당신에게 무엇을 주는지보십시오 :
/* latin */
@font-face {
font-family: 'Kameron';
font-style: normal;
font-weight: 400;
src: local('Kameron'), url(https://fonts.gstatic.com/s/kameron/v8/vm82dR7vXErQxuzngLk6Lg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
font-family: 'Kameron';
font-style: normal;
font-weight: 700;
src: local('Kameron Bold'), local('Kameron-Bold'), url(https://fonts.gstatic.com/s/kameron/v8/vm8zdR7vXErQxuzniAIfO-rpfQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
Yes, that's only a couple of other requests. It's faster to start with these directly - even faster if you download the font files to your own server and add a localhost URL before the Google ones. I know I know, we like CDNs and paralell requests, they are meant to be faster - but just try and see for yourself.
Now for the original question: don't @import, don't <link>, just put this code right into your existing global CSS, it's the best for your server. It needs no plus request, it's not a separate move - only a very slight increase in the size of the file which will add practically nothing to a request's processing time. Will it be beautiful to look at? No... But your site will hopefully get a lot more requests than revisions :) So help the server, not yourself.
Overall, I think it's worth the extra mile.
The one-line version is not designed to be efficient but simple - for bloggers who want the easiest possible way. You know better.
참고URL : https://stackoverflow.com/questions/12316501/including-google-web-fonts-link-or-import
'IT박스' 카테고리의 다른 글
| Android 용으로 개발할 때 Eclipse 콘솔에 메시지를 출력하는 방법 (0) | 2020.05.30 |
|---|---|
| TransactionManagementError 신호를 사용하는 동안 '원자'블록이 끝날 때까지 쿼리를 실행할 수 없습니다. (0) | 2020.05.30 |
| Rails의 특정 액션에 대한 인증 토큰을 어떻게 무시합니까? (0) | 2020.05.30 |
| IntelliJ IDEA 및 기타 Jetbrains IDE에서 "절전 모드"란 무엇입니까? (0) | 2020.05.30 |
| Jenkinsfile의 변경 사항을 로컬에서 어떻게 테스트합니까? (0) | 2020.05.30 |