Question

我只是为我的网站添加一个帐户标题，只显示玩家用户名。

我正在使用自定义字体，它在chrome和IE上工作正常，但对于Firefox，它不显示自定义字体，只显示下一个可用字体Verdana。我不介意，但我的问题是字体Verdana的大小比我的自定义字体小，所以如果我将其设置为7.5pt作为字体大小，自定义字体显示两倍的大小。无论如何我可以为Firefox设置更高的字体大小吗？

以下是用户名所在的div的css：

font-size: 7.5pt;
color: #9f1717;
text-align: center;
font-family: xirod, xirodeot, Verdana, Geneva, sans-serif;

Answer 1

我建议使用Firefox支持的字体格式，或使用font-size-adjust在不同的字体系列中获得统一的尺寸。

您可以通过添加以下CSS来使用font-size-adjust：

font-size-adjust:0.5;

这会将所有字体设置为具有大致相同的高度小写字符（通常，当使用不同的字体查看时，这些字符会产生看起来更接近相同尺寸的文本。）

Answer 2

这有可能是由cross-origin policy kicking in造成的吗？如果您将字体和/或其他静态资源存储在CDN上或仅存储在不同的子域中，则会出现这种情况。目前只有FF实现了它的规格，但我推测其他浏览器将开始采取这种行为。

将http-header添加到类似于Access-Control-Allow-Origin: *的字体文件中可以解决问题 - 而快速谷歌搜索会产生比我在此处描述的规则细节更好的结果。

...

不是吗？您可以使用仅适用于某个url-prefix的结构来专门定位Firefox - 如果您没有传递前缀值，它将始终应用但只能被FF浏览器理解：

@-moz-document url-prefix() {
    .username {font-size:15pt;}
}

Answer 3

您现在应该能够在所有浏览器中获得它。提供您的字体不受版权保护，您可以将其上传到Font Squirrel并为您的网站创建自定义CSS字体嵌入解决方案。我建议你试试这个。如果这不起作用，则始终可以jQuery browser detection solutions加载单独的样式表。

将以下代码与浏览器检测插件一起使用：

if($.browser.mozilla) {
  document.write("<style type='text/css'>body { font-size: 3.75pt; }</style>");
}

Answer 4

使用css浏览器选择器，参考http://rafael.adm.br/css_browser_selector/

不同的字体大小只适用于Firefox

4 个答案: