为了防止与字体加载时间相关的字体渲染滞后,我写了一些简单的脚本,它加载了包含@font-face
的CSS和带有一些延迟的自定义字体。由于该解决方案,默认情况下使用系统字体(没有滞后),然后用新字体覆盖新CSS。但是,除Chrome之外,解决方案无处不在在chrome网络选项卡中,我可以看到字体已加载,但不知怎的,它们没有被重新渲染。
它在IE和Firefox(所需字体)中的外观:
和Chrome(系统字体):
HTML:
<link data-href="/assets/v2/default/css/font-loader.css" rel="stylesheet" type="text/css" data-mobile="true"/>
默认CSS:
body{
font-family: sans-serif;
}
.price{
text-align: right;
font-size: 22px;
font-family: sans-serif;
letter-spacing: 0.01em;
}
加载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));
答案 0 :(得分:2)
您指定的woff2文件没有拉丁字符。 您必须复制&#34; cyrillic-ext&#34;的网址。字体的子集。
你应该使用&#39; latin&#39;子集。将woff2的网址更改为:
url('https://fonts.gstatic.com/s/ptsansnarrow/v7/UyYrYy3ltEffJV9QueSi4UU-p1xzoRgkupcXIqgYFBc.woff2') format('woff2'),
答案 1 :(得分:1)
当我将代码更改为:
时,问题仅出现在WOFF2
字体中
@font-face {
font-family: 'PT Sans Narrow';
font-style: normal;
font-weight: 400;
src: local('PT Sans Narrow'),
local('PTSans-Narrow'),
/*Remove woff2 from here and load woff instead*/
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');
}
工作正常。