但是在 chrome 中是这样的!
CSS:
h3
{
font-family: 'Lato Hairline Light';
font-size: 20px;
text-align: center;
opacity: 0;
color: lime;
animation-fill-mode: forwards;
animation-name: fadeIn;
animation-timing-function: ease-in;
animation-duration: 1s;
animation-delay: 1s;
}
在 Chrome 中呈现得很好:
但在 Firefox 中呈现为默认字体:
这只发生在 Lato Hairline 的“Light”版本中。如果我只使用“Lato”或“Lato Hairline”,它在两种浏览器中都能正常呈现。
为什么会发生这种情况,我该如何解决?
编辑:添加
@font-face {
font-family: 'Lato Hairline';
src: url('LATO-HAIRLINE.TTF') format('truetype');
}
EDIT2:字体粗细设置为正常的“Lato Hairline”与“Lato Hairline Light”不同。
这是“Lato Hairline Light”+ 粗体:
这是“Lato Hairline”+粗体:
这是正常的“Lato Hairline”:
这是“Lato”+ Light:
第一个是在 chrome 中显示的,也是我要显示的。
最佳答案
我相信这是因为它是 H3,firefox 正在应用人为的“粗体效果”,并且由于它无法正确呈现它,它可能会弄乱字体。你是从谷歌字体加载字体吗?如果是这样,通常最好使用与之关联的字体粗细。如果您将 fontface 与在您自己的服务器上下载的字体一起使用,则应仅创建 1 个字体系列并创建与您的字体相关的字体粗细值。即
@font-face {
font-family: 'DroidSerif';
src: url('DroidSerif-Regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'DroidSerif';
src: url('DroidSerif-Italic-webfont.ttf') format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'DroidSerif';
src: url('DroidSerif-Bold-webfont.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'DroidSerif';
src: url('DroidSerif-BoldItalic-webfont.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
使用浏览器更容易、更安全。通常,chrome 比它应该理解的更多的东西,而 firefox 将现实带回到你的脸上 eheh
如果是 fontface,您能告诉我们您是如何将它们添加到您的网站中的吗?也可能是文件不被 Firefox 接受的问题
如果它是谷歌字体,就这样做:
将此添加到您的 head
部分
<link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900,100italic,300italic,400italic,700italic,900italic' rel='stylesheet' type='text/css'>
然后,你只需要这样做:
.lato-thin{
font-family: 'Lato', sans-serif;
font-weight: 100;
}
查看此页面以获取更多信息:https://www.google.com/fonts#QuickUsePlace:quickUse
这是一个 JS fiddle,fiddle 中的 javascript 与将链接粘贴到 CSS 中的作用相同。在 firefox 上测试它,它完美地工作 https://jsfiddle.net/3db60oh7/
关于css - Lato Hairline Light 无法在 Firefox 中呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30537424/