@ 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

回答

相關問題