Google 글꼴 사전 로드
Light House 감사는 내가 React 앱에서 사용하고 있는 두 개의 구글 폰트, 특히 주요 요청을 미리 로드하는 것을 제안하고 있다.라이트하우스 회원은 다음을 사용할 것을 제안했다. <link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:700" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
폭포에서 그걸 보고 콘솔에 경고가 들어온다고 해서 요청을 하는 걸 알아
"리소스 https://fonts.googleapis.com/css?family=Open+Sans|로보토:700은 링크 프리로드를 사용하여 미리 로딩되었지만 윈도우의 로드 이벤트로부터 몇 초 이내에 사용되지 않았다.값이 적절하고 의도적으로 사전 로드되었는지 확인하십시오."
불행히도 내 앱에는 두 개의 폰트가 더 이상 표시되지 않는다.이것들을 CSS에 @font-face로 정의할 필요가 있을까?
글꼴을 미리 로드하는 올바른 방법은 a를 모두 추가하는 것이다.preload링크와 astylesheet. MDN에 근거한 간단한 예는 다음과 같다.
<head>
<meta charset="utf-8">
<title>Preloading fonts</title>
<link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto&display=swap" as="style">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto&display=swap">
</head>
<body>
</body>
위의 예에서,preload링크는 클라이언트에 설치되었는지 여부에 관계없이 글꼴을 가져오는 요청을 보낸 후stylesheet올바르게 로드하고 사용할 수 있도록 연결하십시오.
preload브라우저에 자원이 필요할 수 있다고 말하는 것이 더 좋은 방법이다. 그래서 자원이 요청될 것이고, 그 다음, 당신이 필요하거나 사용하기로 결정한다면, 당신은 그것을 사용할 수 있다.
다음과 같이 미리 연결한 후 프리로드한 후 마지막으로 로드하는 것이 좋다.
<link rel='preconnect' href='https://fonts.gstatic.com' crossorigin>
<link rel='preload' as='style' href='https://fonts.googleapis.com/css2?family=Open+Sans|Roboto:wght@300&display=swap'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Open+Sans|Roboto:wght@700&display=swap'>
사전 연결 및/또는 사전 로딩만 할 수 없으며, 여전히 평소와 같이 로딩해야 한다.그런 다음 해당 글꼴의 기본값이 아닌 글꼴 중량은 다음을 사용하여 지정하십시오.:wght@700예를 들면.연속된 글꼴 사이에 파이프를 놓으십시오.|서명하다
구글은 항상 같은 도메인에서 글꼴을 제공한다.fonts.gstatic.com
스타일을 추가하기 전에 미리 로드하십시오.
<link rel="preconnect" href="https://fonts.gstatic.com/">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:700">
참조URL: https://stackoverflow.com/questions/50824181/preloading-google-fonts
'Programing' 카테고리의 다른 글
| Python __str_ 대 __unicode___ (0) | 2022.04.09 |
|---|---|
| 왜 밑줄이 각4의 활자 클래스의 필드에 추가되는가? (0) | 2022.04.09 |
| Nuxt TTFB 향상 (0) | 2022.04.09 |
| Vue.js에게 강제로 재장전/재장전할 수 있는가? (0) | 2022.04.09 |
| 소품 포함 Vue-Router 전달 데이터 (0) | 2022.04.09 |