@font-face - 如何让它在所有浏览器上工作

Posted

技术标签:

【中文标题】@font-face - 如何让它在所有浏览器上工作【英文标题】:@font-face - how to make it work on all browsers 【发布时间】:2012-03-28 02:10:54 【问题描述】:

Internet Explorer 9、Firefox、 Opera、Chrome 和 Safari。

但是,Internet Explorer 9 仅支持 .eot 类型的字体,而 Firefox、Chrome、Safari 和 Opera 支持 .ttf 和 .otf 类型的字体。

注意:Internet Explorer 8 及更早版本,不支持 @font-face 规则。

此文本来自here。所以为了让@font-face 能在 IE9 上工作,我应该只指定 EOT 字体文件:

@font-face

font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9 */

特别是我正在使用 Myriad Pro,而且我有 OTF 字体。如何将它们转换为 EOT 类型?

关于 IE7 和 IE8 应该使用什么技巧/hack 来获得所需的结果?

【问题讨论】:

忘记 w3schools 告诉你的一切。机会很高,这完全是错误的。在其他评论中查看我的链接。 【参考方案1】:
@font-face 
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome.woff2') format('woff2'), 
       url('/fonts/awesome.woff') format('woff'),
       url('/fonts/awesome.ttf') format('truetype'),
       url('/fonts/awesome.eot') format('embedded-opentype');

local() 指令允许您引用、加载和使用本地安装的字体。

url() 指令允许您加载外部字体,并允许包含可选的 format() 提示

【讨论】:

【参考方案2】:

Jacktheripper 已经发布了一个不错的字体,

我向您推荐以下关于该主题的好文章:

Article from Paul Irish

Article from fontspring

就个人而言,我使用Google Web Fonts 并且对此非常满意。您可以轻松转换字体、嵌入正确的代码以及担心各种可用字体的版权问题。

【讨论】:

你如何使用谷歌网络字体?这对我来说是新事物。 只需点击链接并按照说明进行操作,非常简单。试试看,如果您有任何其他问题,请随时问我;)【参考方案3】:

我认为这几乎是完全跨浏览器的

@font-face 
    font-family: 'Name';
    src: url('location.eot');
    src: url('location.eot#iefix') format('embedded-opentype'),
         url('location.woff') format('woff'),
         url('location.ttf') format('truetype'),
         url('location.svg#Name') format('svg');
    font-weight: normal;
    font-style: normal;

Location 是您服务器上的路径,Name 是字体的名称

【讨论】:

IE7 和 IE8 哪一个?? 我还要添加 - onlinefontconverter.com/myfonts.php 字体转换链接。 如果我们要“在所有浏览器上工作”,那么不要为权重和样式属性而烦恼。 IE url('location.eot#iefix') format('embedded-opentype') 对于 IE8 或更低版本非常重要。 IE 的模拟器在真正的浏览器上之前不会出现任何问题。【参考方案4】:

首先,您没有嵌入大多数字体的版权 - 任何人都可以下载它们,因此将字体放在您的服务器上供他人下载没有什么不同。

我的建议是使用此处的字体松鼠工具:http://www.fontsquirrel.com/fontface/generator 为您生成文件和代码。

注意不要共享您无权共享的字体。

【讨论】:

哦,它适用于 IE9,谢谢,它也适用于 IE7 和 IE8 吗? :) 我应该如何防止共享字体?用户可以在 CSS 代码中看到链接地址,直接下载文件即可。 @Karine 您的客户在您的网页上可以看到的所有内容(无论是代码、图片还是字体)都已下载到他的计算机上,因此您无法阻止用户“窃取和使用您的宝贵字体”。这就是网络的运作方式。 为什么 Myriad Pro 被列入fontsquirrel.com/fontface/generator 的黑名单?如何处理该字体? 1.我发现千斤顶的回答更有用。 2. Myriad Pro 不能免费使用!!这就是它被列入黑名单的原因。 @Christoph 我想知道为什么生成的代码(这与杰克的答案相同)应该解决 IE7 和 8 的问题,如果明确说明:注意:Internet Explorer 8 和更早版本,做不支持“@font-face”规则。

以上是关于@font-face - 如何让它在所有浏览器上工作的主要内容,如果未能解决你的问题,请参考以下文章

css @font-face 不会在所有浏览器中垂直对齐文本

css font-face 在 IE 中不起作用

仅在 Internet Explorer 中使用不同的字体

所有 Windows 浏览器的@font-face 问题

@font-face 仅在 chrome 中无法在 ff/opera 中使用

@font-face 真的可以强制自定义字体显示并覆盖用户的选择吗?