Question

我可以在chrome中显示字体，但不能在firefox中显示。我想知道这是否是一个问题因为我正在使用bootstrap框架。这是我的代码：

@font-face
{
    font-family:"bodyFont";
    src: url("http://caseymmiller.com/galapagos/fonts/museosans_300.otf");
}

body 
{
    margin: 0;
    font-family: "bodyFont";
    font-size: 15px;
    line-height: 20px;
    color: #333333;
    background-color: #ffffff;
}

此外，在将其上传到我的服务器后，现在只有一种字体出现在Chrome中...并且本地采购无效，因此我将其删除。我很困惑。 http://caseymmiller.com/galapagos/bootstrapInvasive/Invasive.html

这就是我现在在css中所拥有的。我尝试过你之前列出的内容，但是当为每种字体获取两个网址时，它们都不会出现。这就是为什么有些人现在被评论出来的原因。这些是我想从现在开始使用的资源。

@font-face
{
font-family:"headerFont";
src: url("http://livinggalapagos.org/static/Fonts/qhyts__.ttf");
/*src: url("http://livinggalapagos.org/static/Fonts/qhyts__.woff");*/

}

@font-face{
font-family:"subHeadFont";
src: url("http://livinggalapagos.org/static/Fonts/museosans_500.ttf");
src: url("http://livinggalapagos.org/static/Fonts/museosans_500.woff");

}

@font-face{
font-family:"bodyFont";
src: url("http://livinggalapagos.org/static/Fonts/museosans_300.ttf");
/*src: url("http://livinggalapagos.org/static/Fonts/museosans_300.woff");*/

}

Answer 1

@font-face是一个复杂的属性。以下是一些可以帮助您编写“跨浏览器”@font-face。

的资源

https://developer.mozilla.org/pt-BR/docs/CSS/@font-face

http://www.fontsquirrel.com/tools/webfont-generator

Answer 2

我想知道你的2个房产中是否有拼写错误？

src: url('fonts/museosans_300-.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/museosans_300-.ttf')  format('truetype'), /* Safari, Android, iOS */

这两个不应该

src: url('fonts/museosans_300-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('fonts/museosans_300-webfont.ttf')  format('truetype'), /* Safari, Android, iOS */

请注意文件路径末尾添加的 webfont 。

确保在进行这些更改后清除浏览器缓存。

祝你好运！

bootstrap css中的@ font-face字体没有在firefox中显示

2 个答案: