2

I am able to display fonts in chrome, but not in firefox. I'm wondering if this is an issue because I'm using the bootstrap framework. Here's my code:

@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;
}

Also, upon uploading it to my server, only one font is now appearing in chrome... and local sourcing wasn't working so I removed it. I am quite confused. http://caseymmiller.com/galapagos/bootstrapInvasive/Invasive.html

This is what I have in the css now. I tried what you listed before, but when sourcing both urls for each font, none of them would appear. That's why some are commented out right now. These are the sources that I want to use from now on.

@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");*/

}
4

2 回答 2

0

我想知道您是否在 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 。

在进行这些更改后，请务必清除浏览器缓存。

祝你好运！

于 2013-02-21T19:07:27.427 回答
0

@font-face是一个复杂的属性。这里有一些资源可以帮助您编写“跨浏览器”代码@font-face。

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

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

于 2013-02-21T17:39:45.600 回答