Google 글꼴이 Google 크롬에서 렌더링되지 않습니다.
나는 새로운 WordPress 테마를 만들고 있는데 (관련성이 있는지 모르겠 음) 나를 계속 괴롭히는이 문제가 있습니다.
Google Webfonts ( <head>섹션에 CSS 포함)에서 Roboto Slab을로드했습니다 . 다른 모든 브라우저에서는 Google 크롬을 제외하고 글꼴이 정상적으로 렌더링됩니다. Google 크롬에서 웹 사이트를 처음로드 할 때 해당 사용자 지정 글꼴을 사용하는 텍스트가 전혀 표시되지 않습니다 (글꼴 스택에도 Georgia가 대체 항목으로 포함되어 있음 "Roboto Slab", Georgia, serif;). 스타일이 지정된 링크를 가리 키거나 Inspector에서 CSS 속성을 다시 트리거하면 텍스트가 표시됩니다.
얼마 전에 테마를 시작했기 때문에 이전에는 완벽하게 작동했음을 분명히 기억할 수 있습니다. 알려진 최근 Chrome 업데이트 버그입니까?
첫 번째로드 : 스크린 샷 # 1
CSS 속성을 다시 적용한 후 반응 형보기로 이동하거나 요소를 마우스로 가리 킵니다 . 스크린 샷 # 2
누구든지 비슷한 문제가 있습니까? 어떻게 진행해야합니까?
감사!
분명히 알려진 Chrome 버그 입니다. 문제를 해결해야하는 CSS 전용 해결 방법이 있습니다.
body {
-webkit-animation-delay: 0.1s;
-webkit-animation-name: fontfix;
-webkit-animation-duration: 0.1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
}
@-webkit-keyframes fontfix {
from { opacity: 1; }
to { opacity: 1; }
}
Chrome에 텍스트를 다시 칠하라고 지시하면되는 것 같습니다.
CSS 수정이 저에게 효과가 없었고 0.5 초 지연 스크립트도 어색해 보입니다.
이 JS 스 니펫은 우리를 위해 작동하는 것 같습니다.
<script type="text/javascript">
jQuery(function($) {
if (/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) {
$('body').css('opacity', '1.0')
}
})
</script>
CSS 수정이 작동하지 않는 경우
경우 첫 번째 평가 후가 작동하지 않는, 여기에 솔루션입니다 :
다음에서 'http :'를 제거하십시오.
<link href='http://fonts.googleapis.com/css?family=Alfa+Slab+One' rel='stylesheet' type='text/css'>
또는
@import url(http://fonts.googleapis.com/css?family=Alfa+Slab+One);
David Bain이 설명했듯이 대부분의 최신 브라우저는 실제로 프로토콜을 지정할 필요가 없으며 사용자가 호출 한 컨텍스트에 따라 프로토콜을 "추론"합니다.
위의 CSS 수정을 시도했지만 성공하지 못했습니다. 마지막으로 다음을 포함하는 스타일 시트 (chrome.css)를 만들어 해결했습니다.
body {
-webkit-animation-delay: 0.1s;
-webkit-animation-name: fontfix;
-webkit-animation-duration: 0.1s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: linear;
}
@@-webkit-keyframes fontfix {
from { opacity: 1; }
to { opacity: 1; }
}
그리고 페이지 하단에 jquery로로드합니다.
<script type="text/javascript">
$(document).ready(function () {
$('head').append('<link href="/chrome.css" rel="stylesheet" />');
});
</script>
위의 CSS를 통합했지만 헤더에 다음 자바 스크립트도 포함하고 있습니다.
(참고, 아래 코드에서 글꼴을 사용자 정의하지 않았다는 것을 알고 있습니다. 그러나 그럼에도 불구하고 Chrome이 페이지의 글꼴을 다시 그리도록하는 데 여전히 도움이되는 것 같습니다. 글꼴이 다른 곳에서 올바르게 참조되는지 확인하십시오)
위에서 언급 한 CSS를 내 ...에 포함 된 아래 코드와 함께 사용하면 최악의 경우 내 페이지의 모든 글꼴이 1 초 정도 지연된 후 표시됩니다.
이것이 사람들을 돕기를 바랍니다. 건배.
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(function() { $('body').hide().show(); });
</script>
<script type="text/javascript">
//JavaScript goes here
WebFontConfig = {
google: { families: ['FontOne', 'FontTwo'] },
fontinactive: function (fontFamily, fontDescription) {
//Something went wrong! Let's load our local fonts.
WebFontConfig = {
custom: { families: ['FontOne', 'FontTwo'],
urls: ['font-one.css', 'font-two.css']
}
};
loadFonts();
}
};
function loadFonts() {
var wf = document.createElement('script');
wf.src = ('https:' == document.location.protocol ? 'https' : 'http') +
'://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
wf.type = 'text/javascript';
wf.async = 'true';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(wf, s);
}
(function () {
//Once document is ready, load the fonts.
loadFonts();
})();
</script>
위의 내용은 다음과 같습니다. https://productforums.google.com/forum/#!topic/chrome/tYHSqc-fqso
JS 솔루션으로 수정했지만 최신 Google 호스팅 jquery (1.11)를 사용하여 수정해야했습니다.
나는 같은 문제에 직면했습니다. 여기에 설명 된대로 HTTP / S 프로토콜 불일치 때문이었습니다 .
URL의 https 버전을 사용 하십시오 .
Google 글꼴 렌더링 중 이상한 문제에 대한 유사한 문제를 참조하십시오 .
해결책은 Google CDN 대신 Mozilla CDN에서 원하는 글꼴 (내 경우 'Fira Sans')을로드하는 것입니다.
실제 솔루션은 아니지만이 스레드의 다른 모든 것보다 더 잘 작동합니다. 글꼴을 변경했습니다. 나는 Fira Sans를 가지고 있었고 이제 방금 상자에서 작동하는 Roboto 로 변경했습니다 .
방금 내 Windows 글꼴에서 roboto 글꼴을 삭제하고 모든 것이 지금 작동합니다.
시스템에 이전 버전의 글꼴이 있기 때문일 수 있습니다. 나는 추측한다.
나는 Meg의 대답으로 작업하려고했지만 다른 많은 사람들과 마찬가지로 나에게도 효과가 없었습니다.
Google 글꼴을 사용하는 경우이 트릭 [단계에 대한 스크린 샷 추가]을 찾았습니다.
1) 강조 표시된 CSS 또는 표준 링크에서 URL을 가져옵니다.
2) 다른 탭에서 링크를 열고 CSS 파일에있는 전체 CSS 코드 (예 : 글꼴)를 복사하고 실행합니다.
많은 http 호출이 추가되어 성능이 확실하지 않거나 하나의 글꼴을 복사 해보십시오.
1 단계 이미지 
Image for step 2 
It's possible that the element has text-rendering: optimizeLegibility set which can cause this, or similar, issues. Changing it to auto fixed this problem for me with a Foundation 5 project that sets it to optimizeLegibility by default.
If anyone is still struggling with this issue (2019), there seems to be a bug in Google Fonts CSS generator script.
I loaded my fonts with the following tag:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:400,300">
Every @font-face in the file contained a line like this:
src: local('Roboto'), local('Roboto-Regular'), local('sans-serif'), url(https://fonts.gstatic.com/s/roboto/v19/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2) format('woff2');
As you can see, the local('sans-serif') is placed prior to the remote URL, which is wrong. This causes Chrome to load the default sans-serif font instead of the requested one.
A simple fix is to reorder the font-weight part of the URL, from Roboto:400,300 to Roboto:300,400. This causes the generator to not include the local('sans-serif') source.
Hope it helps someone.
은색 총알이 아닐 수도 있지만 fontawesome css 링크를 우리 페이지 하단으로 이동하고 위에 나열된 weblike 수정 사항을 이동하여 사이트의 문제를 해결하십시오.
여기에서 모든 훌륭한 솔루션을 시도하기 전에 사람들이 여전히이 문제를 겪고 있다면 CSS에서! important 태그를 사용하여 문제가 해결되는지 확인하십시오. 저에게 그랬던 것처럼 버그가 다음과 같은지 확실하지 않습니다. 오래된 Chrome 버그.
.faultyText {"Roboto Slab", Georgia, serif !important}
내가 만든 Checkout 플러그인 : https://chrome.google.com/webstore/detail/fontfix/ekgfbmjaehhpbakdbpfmlepngjkaalok
브라우저가 전체 페이지를 다시 그리도록하는 순수한 자바 스크립트로 웹을 재정렬합니다.
참고 URL : https://stackoverflow.com/questions/22011139/google-fonts-are-not-rendering-on-google-chrome
'Program Tip' 카테고리의 다른 글
| SVG에서 속이 빈 원 그리기 (0) | 2020.11.24 |
|---|---|
| setInterval 콜백이 한 번만 실행되는 이유는 무엇입니까? (0) | 2020.11.24 |
| TypeScript-고정 길이 배열 (0) | 2020.11.24 |
| 파일 내에서 단일 바이트 청크를 어떻게 추출합니까? (0) | 2020.11.23 |
| Javascript에서 현재 디렉토리 이름을 어떻게 얻을 수 있습니까? (0) | 2020.11.23 |