关于html：@ font-face在Chrome和Safari上不起作用

@font-face not working on Chrome and Safari

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

1
2
3
4
5
6

@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');
}

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

1
2
3
4
5
6
7
8
9
10
11

@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是google字体，那么它易于使用Google代码进行嵌入，太可靠了。网址：http://www.google.com/fonts#UsePlace:use/Collection:Open+Sans
让我知道是否仍然存在问题。

你可以试试这个吗？

1
2
3
4
5
6

或者你可以使用

1
2
3
4
5
6
7
8
9
10

@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包含的最佳方式是这样的(如果您将所有这些文件拒之门外)：

1
2
3
4
5
6
7
8
9
10

@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允许使用webfonts：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

# ----------------------------------------------------------------------
# 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