Question

我使用了@ 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');
}

Answer 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：显然，开放sans是谷歌字体，如果是这样，那么它易于使用谷歌代码进行嵌入，它太可靠了。网址：http://www.google.com/fonts#UsePlace:use/Collection:Open+Sans 如果仍然发现问题，请告诉我。

Answer 2

@ 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

Answer 3

你能试试吗？

<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;
}

@ font-face无法在Chrome和Safari上运行

3 个答案: