@ font-face不适用于Chrome和Safari

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

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

来源

2014-02-07 user3283471

一个@字体面的最佳方式包括本（如果你把所有这些文件offcourse）：

@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

来源

2014-02-07 13:35:02

你能试试吗？

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

来源

2014-02-07 13:37:10 apsuva

您的这个命名为非常酷的网站：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 让我知道如果仍然发现问题。

来源

2014-02-07 13:53:45

@ font-face不适用于Chrome和Safari

回答

相关问题