【问题标题】:@font-face rendering correctly in IE and Firefox but not Chrome@font-face 在 IE 和 Firefox 中正确渲染,但在 Chrome 中不正确
【发布时间】:2012-05-26 18:07:02
【问题描述】:

我的自定义字体过去在所有浏览器中看起来都很完美,但是在最近的 webkit 更新之后,它现在在 Chrome 和 Safari 中呈现非常粗体,但在 Firefox 和 IE 中看起来很好。

这是我的 CSS:

@font-face  {
    font-family: "KlavikaBasicRegular";
    src: url("i/klavikabasic-regular-webfont.eot");
    src: url("i/klavikabasic-regular-webfont.eot?#iefix") format("embedded-opentype"),
         url("i/klavikabasic-regular-webfont.woff") format("woff"),
         url("i/klavikabasic-regular-webfont.otf") format("opentype"),
         url("i/klavikabasic-regular-webfont.svg#KlavikaBasicRegular") format("svg");
    font-style:normal;
    font-weight:400;
}
.block_header {
    font-family:"KlavikaBasicRegular",sans-serif;
    text-transform: uppercase;
    font-weight: normal;
    font-size: 16px;
    color: #5b5b5b;
    line-height: 18px;
    margin: 0;
    padding: 7px 10px 5px 20px;
}

还有 HTML:

<h3 class="block_header">MY headline</h3>

还有其他人注意到类似的问题吗?

【问题讨论】:

    标签: google-chrome css webkit font-face


    【解决方案1】:

    我个人没有……

    我会说您很可能是正确的,并且各种浏览器的呈现方式存在差异..

    我看到你已经有了weight:normal...

    试试-webkit-font-smoothing: antialiased;

    见@http://ilikekillnerds.com/2010/12/a-solution-to-stop-font-face-fonts-looking-bold-on-mac-browsers/

    【讨论】:

    • 谢谢,但没有效果。
    • 尝试使用较小的字体大小或使用文本阴影...见stackoverflow.com/questions/5069752/…
    • 字体大小无关紧要。无论大小,问题都存在。我尝试了从 12 像素到 30 像素的所有尺寸。
    • 阴影怎么样,你可以强迫它有一个与你的页面背景颜色相同的阴影,并使用阴影来缩小字符吗?
    • 这里是博文的作者。我注意到这个问题有时是由文本的颜色和背景颜色引起的。黑色背景上的白色文本是我注意到的屡犯者,并且非常容易受到字体问题的影响。这是一个奇怪的问题,有时字体平滑修复有效,但有时它超出了属性可以修复的范围。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2013-06-26
    • 1970-01-01
    • 2013-03-22
    • 1970-01-01
    • 2015-03-13
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多