Question

我的网站字体在我的笔记本电脑中显示不同。没关系在我的电脑上（桌面）。为了解决这个问题，我正在尝试使用以下CSS代码：

body {
    padding:0;
    margin:0;    
    background-color:#f4f4f4;    
    font-size:14px;
    line-height:25px;   
    font-family: 'Myriad Pro';
    src: url('font/MyriadPro-Bold.OTF') format('OTF'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
        url('font/MyriadPro-Bold.OTF') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

@font-face {
    font-family: 'Myriad Pro';
    src: url('font/MyriadPro-Bold.OTF') format('OTF'), /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
        url('font/MyriadPro-Bold.OTF') format('truetype'); /* Chrome 4+, Firefox 3.5, Opera 10+, Safari 3—5 */
}

但它仍然在我的笔记本电脑中显示不同的字体样式。为什么呢？

Answer 1

您可以尝试其中一种解决方案。

确保您的src字体文件夹在笔记本电脑中解析（您几乎可以在任何浏览器上使用开发人员工具（按F12键），单击网络选项卡，查看是否有任何资源未正确加载）
如果您的网站在IIS上运行，有时您必须使用以下设置在web.config中注册Mime类型

（这对我来说很好，因为我使用的是IIS 7.0）

尝试添加更多字体文件，有时旧浏览器无法正确识别字体。我建议你试试这个页面http://everythingfonts.com/font-face它会为你提供整个字体标记和每种格式所需的字体（eot，woff，svg和ttf）。当我需要添加Font-face和Works时，我会使用它。

Answer 2

当您在项目中调用自定义字体时;确保在上载项目文件的服务器上上载字体。

您需要使用每种格式字体类型，例如(.eot, .woff, and ttf)

/ ----------------- TTF to EOT Font Converter -------------------- < / EM> /

http://ttf2eot.sebastiankippe.com/

body { font-family: 'Myriad Pro', Fallback, sans-serif; } @font-face { font-family: 'Myriad Pro'; src: url('MyriadPro-Bold.eot'); /* IE9 Compat Modes */ src: url('MyriadPro-Bold.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('MyriadPro-Bold.woff') format('woff'), /* Modern Browsers */ url('MyriadPro-Bold.ttf') format('truetype'), /* Safari, Android, iOS */ url('MyriadPro-Bold.svg#svgFontName') format('svg'); /* Legacy iOS */ }

CSS @ font-face无法正常工作

2 个答案: