@font-face 不适用于 Chrome 和 Safari答案

【问题标题】：@font-face not working on Chrome and Safari@font-face 不适用于 Chrome 和 Safari
【发布时间】：2014-03-04 22:31:53
【问题描述】：

我使用了@font-face，并以 .ttf、.eot 和 .woff 格式上传了所有字体。它在 Firefox 上运行良好，但 Chrome 和 Safari 的所有文本都转向 Times New Roman。代码如下：

@font-face {
font-family: 'Open Sans Regular';
src: url(../open_sans/OpenSans-Regular.eot);
src: url("../open_sans/OpenSans-Regular.woff") format('woff');
src: local('Open Sans'), url('../open_sans/OpenSans-regular.ttf') format('truetype');
}

【问题讨论】：

标签： html css font-face

【解决方案1】：

你有一个非常酷的网站，命名为：http://www.fontsquirrel.com/tools/webfont-generator 此外，还修改了您的代码。

@font-face {
font-family: 'open_sansregular';
src: url('../open_sans/OpenSans-Regular.eot');
src: url('../open_sans/OpenSans-Regular.eot?#iefix') format('embedded-opentype'),
     url('../open_sans/OpenSans-Regular.woff') format('woff'),
     url('../open_sans/OpenSans-Regular.ttf') format('truetype'),
     url('../open_sans/OpenSans-Regular.svg#open_sansregular') format('svg');
font-weight: normal;
font-style: normal;

}

PS：显然 open sans 是 google 字体，如果是这样，那么它易于使用 google 代码进行嵌入，它太可靠了。网址：http://www.google.com/fonts#UsePlace:use/Collection:Open+Sans 如果仍然发现问题，请告诉我。

【讨论】：

【解决方案2】：

你可以试试这个吗？

<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<style>
body {
    font-family: 'Open Sans', sans-serif;
}
</style>

或者你可以使用

@font-face {
    font-family: 'OpenSans-Regular';
    src: url('OpenSans-Regular.eot');
    src: local('OpenSans-Regular'), local('OpenSans-Regular'), 
    url('OpenSans-Regular.woff') format('woff'),
    url('OpenSans-Regular.svg#OpenSans-Regular') format('svg'), 
    url('OpenSans-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

【讨论】：

【解决方案3】：

@font-face 包含的最佳方式是这样（如果您将所有这些文件都放在一边）：

@font-face {
   font-family: 'FontName';
   src: url('FileName.eot');
   src: url('FileName.eot?#iefix') format('embedded-opentype'),
        url('FileName.woff') format('woff'),
        url('FileName.ttf') format('truetype'),
        url('FileName.svg#FontName') format('svg');
   font-style: normal;
   font-weight: normal;
}

还要确保您的 htaccess 允许使用网络字体：

# ----------------------------------------------------------------------
# Webfont access
# ----------------------------------------------------------------------

# Allow access from all domains for webfonts.
# Alternatively you could only whitelist your
# subdomains like "subdomain.example.com".

<IfModule mod_headers.c>
  <FilesMatch "\.(ttf|ttc|otf|eot|woff|font.css)$">
    Header set Access-Control-Allow-Origin "*"
  </FilesMatch>
</IfModule>

# Webfonts
AddType application/vnd.ms-fontobject  eot
AddType application/x-font-ttf         ttf ttc
AddType font/opentype                  otf
AddType application/x-font-woff        woff

【讨论】：