html - Google Chrome 与 Firefox 中的字体显示完全不匹配

标签 html css font-face

我使用了 Goolge 的 CSS,但得到了令人费解的结果。下面是两个截图。来自 Firefox 的显示正确(或者至少是预期的呈现),来自 Chrome 的显示一些随机字体...

enter image description here 火狐

enter image description here Chrome

这是我加载它的方式:

<link href='http://fonts.googleapis.com/css?family=Lobster+Two:700italic'
          rel='stylesheet' type='text/css'/>

相关的 CSS 规则:

.digit {
    font-family: 'Lobster Two', cursive;
    font-size: 24pt;
    background-color: #d1d2d4;
    color: #ebebec;
    padding-left: 5px;
    padding-right: 5px;
    margin-bottom: 10px;
    cursor: pointer;
    display: block;
    float: left
}

我很迷茫...

最佳答案

在某种程度上,根据 Fluidbyte 的建议,我决定使用我拥有的字体文件,而不是来自 Google 的 CDN 的字体文件并且它起作用了。我仍然很想知道为什么它在我第一次尝试时不起作用,但作为实际的解决方案(可能只与这种特定字体相关),如果您遇到同样的问题,这应该对您有所帮助。

关于html - Google Chrome 与 Firefox 中的字体显示完全不匹配,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15301485/

相关文章:

jquery - 由于 Firebug ,不确定 jquery 是否在 <li> 元素上工作

html - 使用前后的 Accordion CSS

html - 保持水平列表项居中对齐的最佳语义方式是什么?

css - 通过@font-face 的自定义字体在 Firefox 中不起作用

css - 自定义字体和链接框

javascript - 用于控制 &lt;input&gt; 元素之间的空白的棘手 javascript/jquery/YUI 问题

jquery - 更改单个按钮状态

html - 用于 Facebook 和其他社交媒体中的图像的 CSS

css - @font-face 在 IE7-9 中抗锯齿

html - 当它溢出 flex 父项时,如何隐藏 flex 元素?