Chrome @字体问题
Chrome @font-face issue
我最近在 Chrome 上显示字体时遇到了问题,它在 Firefox 和 IE 上仍然有效。但不再加载 Chrome 或 Chrome Android.
在 Chrome Inspector 中加载了字体文件,所有适当的 css 规则似乎都已就位。
Chrome 只是显示一个框来代替每个字符。 css 看起来像这样:
@font-face {
font-family: "SSSocialRegular";src: url('font/ss-social-regular.eot');
src: url('font/ss-social-regular.eot?#iefix') format('embedded-opentype'),
url('font/ss-social-regular.woff2') format('woff2'),
url('font/ss-social-regular.woff') format('woff'),
url('font/ss-social-regular.ttf') format('truetype'),
url('font/ss-social-regular.svg#SSSocialRegular') format('svg');
font-weight: normal;
font-style: normal;
}
我尝试删除加载的字体文件以强制 chrome 加载 true type 和 svg 字体,但结果相同。
Chrome:
火狐:
如果有人遇到这个错误,我也可以通过重新应用来解决它
display:inline-block;
到我的 :before 页面加载后的元素。我只是对 chrome 做了一个简单的 .js 检查,因为这个错误只影响我的新版本:
jQuery(window).load(function(){
var isChrome = !!window.chrome && !!window.chrome.webstore;
if(isChrome){
jQuery('body').addClass('isChrome');
}
});
和css
.isChrome .ss-social-regular.ss-instagram:before,.isChrome .ss-social-regular.ss-facebook:before,
.isChrome .ss-social-regular.ss-twitter:before,.isChrome .ss-social-regular.ss-pinterest:before {
display:inline-block;
}
我最近在 Chrome 上显示字体时遇到了问题,它在 Firefox 和 IE 上仍然有效。但不再加载 Chrome 或 Chrome Android.
在 Chrome Inspector 中加载了字体文件,所有适当的 css 规则似乎都已就位。
Chrome 只是显示一个框来代替每个字符。 css 看起来像这样:
@font-face {
font-family: "SSSocialRegular";src: url('font/ss-social-regular.eot');
src: url('font/ss-social-regular.eot?#iefix') format('embedded-opentype'),
url('font/ss-social-regular.woff2') format('woff2'),
url('font/ss-social-regular.woff') format('woff'),
url('font/ss-social-regular.ttf') format('truetype'),
url('font/ss-social-regular.svg#SSSocialRegular') format('svg');
font-weight: normal;
font-style: normal;
}
我尝试删除加载的字体文件以强制 chrome 加载 true type 和 svg 字体,但结果相同。
Chrome:
火狐:
如果有人遇到这个错误,我也可以通过重新应用来解决它
display:inline-block;
到我的 :before 页面加载后的元素。我只是对 chrome 做了一个简单的 .js 检查,因为这个错误只影响我的新版本:
jQuery(window).load(function(){
var isChrome = !!window.chrome && !!window.chrome.webstore;
if(isChrome){
jQuery('body').addClass('isChrome');
}
});
和css
.isChrome .ss-social-regular.ss-instagram:before,.isChrome .ss-social-regular.ss-facebook:before,
.isChrome .ss-social-regular.ss-twitter:before,.isChrome .ss-social-regular.ss-pinterest:before {
display:inline-block;
}