Chrome中的字体渲染（woff2） - 加载后字体家族不想改变 [英] Font rendering in Chrome (woff2) - after load font family doesn't want to change
本文介绍了Chrome中的字体渲染（woff2） - 加载后字体家族不想改变的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
@ font-face 和自定义字体的CSS。由于这个解决方案，默认情况下系统字体被使用（没有延迟），随后被新的字体覆盖。但是，除了Chrome之外，解决方案都可以使用在铬网络选项卡，我可以看到，字体已加载，但不知何故，他们不重新呈现。
在IE和Firefox（所需字体）中看起来如何：
和Chrome（系统字体）：
HTML：
< link data-href =/ assets / v2 / default / css / font-loader.css =stylesheettype =text / cssdata-mobile =true/>
默认CSS：
body {
font-family：sans-serif;
}
.price {
text-align：right;
font-size：22px;
font-family：sans-serif;
letter-spacing：0.01em;
$ b 加载的CSS：
@ font-face {
font-family：'PT Sans';
font-style：normal;
font-weight：400;
src：local（'PT Sans'），
local（'PTSans-Regular'），
url（'https://fonts.gstatic.com/s/ptsans/v8/ （''woff'），
url（'http://fonts.gstatic.com/s/ptsans/v8/LKf8nhXsWg5ybwEGXk8UBQ.woff'）格式（'woff'），$ b $ （'../ fonts / PT_Sans-Regular.woff2'）格式（'woff2'），
url（'../ fonts / PT_Sans-Regular.woff'）格式（'woff'），
url（'../ fonts / PT_Sans-Web-Regular.ttf'）格式（'truetype'）; U + 02C6，U + 02DA，U + 02DC，U + 2000-206F，U + 2074，U + 20AC，U + 000000FF，U + 0131，U + 0152-0153， U + 2212，U + 2215，U + E0FF，U + EFFD，U + F000;
}
@ font-face {
font-family：'PT Sans Narrow';
font-style：normal;
font-weight：400;
src：local（'PT Sans Narrow'），
local（'PTSans-Narrow'），
url（'https://fonts.gstatic.com/s/ptsansnarrow/v7 （''woff'），
url（'https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff'）格式（'woff'），
url（'../ fonts / PT_Sans-Narrow-Web-Regular.woff2'）格式（'woff2'），
url（'../ fonts / PT_Sans-Narrow-Web-Regular。格式（'truetype'）;'woff'）格式（'woff'），
url（'../ fonts / PT_Sans-Narrow-Web-Regular.ttf'） U + 02C6，U + 02DA，U + 02DC，U + 2000-206F，U + 2074，U + 20AC，U + 000000FF，U + 0131，U + 0152-0153， U + 2212，U + 2215，U + E0FF，U + EFFD，U + F000;
}
body {
font-family：'PT Sans'，sans-serif;
}
.price {
font-weight：normal;
font-family：'PT Sans Narrow'，sans-serif;
letter-spacing：normal;
font-size：30px;
$ b $ $ （）{
var loadScripts = function（）{
var uaString = navigator.userAgent，
isMobile = function（）{
return uaString.indexOf（'android'）> -1 || uaString.indexOf（'Android'）> -1 || uaString.indexOf（'Mobile'）> -1 || uaString.indexOf（' mobile'）> -1 || uaString.indexOf（'iPhone'）> -1
};
this.styles = document.querySelectorAll（'link [data-href] '）;
for（var i = 0; i< this.styles.length; i ++）{
if（this.styles [i] .getAttribute（'data-mobile'）=== 'false'&& amp; isMobile（））{
return;
}
this.styles [i] .setAttribute（'href'，this.styles [i] .getAttribute（' data-href'））;
}
};
if（document.addEventListener） {
document.addEventListener（'DOMContentLoaded'，loadScripts）;
} else {
document.attachEvent（'onreadystatechange'，function（e）{
if（document.readyState ===complete）{
loadScripts（）;
}
}）;
}
}（document））;
解决方案您指定的woff2文件没有拉丁字符。
您必须复制字体cyrillic-ext子集的URL。
您应该使用'latin'子集。将woff2的网址更改为：
url（'https://fonts.gstatic.com/s/ptsansnarrow/v7 /UyYrYy3ltEffJV9QueSi4UU-p1xzoRgkupcXIqgYFBc.woff2'）格式（'woff2'），
To prevent font rendering lags related to font loading time I wrote some simple script which load CSS containing @font-face and custom fonts with some delay. Thanks to that solution, by default system fonts are used (no lag) and later they are overwrite by new CSS with new fonts. However, solution works everywhere except Chrome. In chrome network tab I can see that fonts were loaded but somehow they were not re-rendered.
How it looks in IE, and Firefox (desired fonts):
And Chrome (system fonts):
HTML:
<link data-href="/assets/v2/default/css/font-loader.css" rel="stylesheet" type="text/css" data-mobile="true"/>
Default CSS:
body{
font-family: sans-serif;
}
.price{
text-align: right;
font-size: 22px;
font-family: sans-serif;
letter-spacing: 0.01em;
}
Loaded CSS:
@font-face {
font-family: 'PT Sans';
font-style: normal;
font-weight: 400;
src: local('PT Sans'),
local('PTSans-Regular'),
url('https://fonts.gstatic.com/s/ptsans/v8/JX7MlXqjSJNjQvI4heMMGvY6323mHUZFJMgTvxaG2iE.woff2') format('woff2'),
url('http://fonts.gstatic.com/s/ptsans/v8/LKf8nhXsWg5ybwEGXk8UBQ.woff') format('woff'),
url('../fonts/PT_Sans-Regular.woff2') format('woff2'),
url('../fonts/PT_Sans-Regular.woff') format('woff'),
url('../fonts/PT_Sans-Web-Regular.ttf') format('truetype');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
@font-face {
font-family: 'PT Sans Narrow';
font-style: normal;
font-weight: 400;
src: local('PT Sans Narrow'),
local('PTSans-Narrow'),
url('https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4SppsHecKHw584ktcwPXSnc.woff2') format('woff2'),
url('https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4RdbPw3QSf9R-kE0EsQUn2A.woff') format('woff'),
url('../fonts/PT_Sans-Narrow-Web-Regular.woff2') format('woff2'),
url('../fonts/PT_Sans-Narrow-Web-Regular.woff') format('woff'),
url('../fonts/PT_Sans-Narrow-Web-Regular.ttf') format('truetype');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}
body{
font-family: 'PT Sans', sans-serif;
}
.price{
font-weight: normal;
font-family: 'PT Sans Narrow', sans-serif;
letter-spacing: normal;
font-size: 30px;
}
JS:
(function (document) {
var loadScripts = function () {
var uaString = navigator.userAgent,
isMobile = function () {
return uaString.indexOf('android') > -1 || uaString.indexOf('Android') > -1 || uaString.indexOf('Mobile') > -1 || uaString.indexOf('mobile') > -1 || uaString.indexOf('iPhone') > -1
};
this.styles = document.querySelectorAll('link[data-href]');
for (var i = 0; i < this.styles.length; i++) {
if (this.styles[i].getAttribute('data-mobile') === 'false' && isMobile()) {
return;
}
this.styles[i].setAttribute('href', this.styles[i].getAttribute('data-href'));
}
};
if (document.addEventListener) {
document.addEventListener('DOMContentLoaded', loadScripts);
} else {
document.attachEvent('onreadystatechange', function (e) {
if (document.readyState === "complete") {
loadScripts();
}
});
}
}(document));
解决方案 The woff2 file you specified does not have latin characters.
You must have copied the URL of the "cyrillic-ext" subset of the font.
You should use the 'latin' subset. Change the url of woff2 to this:
url('https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4UU-p1xzoRgkupcXIqgYFBc.woff2') format('woff2'),
这篇关于Chrome中的字体渲染（woff2） - 加载后字体家族不想改变的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
