使用css嵌入字體

Question

我想使用下面的CSS導入字體，它適用於Firefox和IE，但不適用於Chrome不支持。你能幫助我使它在Chrome中也能工作嗎？

@font-face { 
    font-family: "Fontin-Bold"; 
    src: url(fonts/Fontin-Bold.ttf); 
    src: url(fonts/Fontin-Bold.eot); 
} 

Answer 1

不同的瀏覽器有不同的需求，字體也不例外。這裏有一個完整的例子：

CSS

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

} 

您使用的是字體面發生器樣的更好：Font Squirrel

此外，你需要設置你的字體的的.htaccess以下類型的文件夾：

AddType application/vnd.ms-fontobject .eot 
AddType font/ttf .ttf 
AddType font/otf .otf 

---

EDITED：

爲了更好地解釋所述不同的字體格式VS不同的瀏覽器：

• Firefox和Safari支持TTF或OTF格式;
• Internet Explorer支持EOT格式;
• Firefox 3.6支持新的WOFF（網絡字體 文件的新格式建議）;
• Google Chrome和iPhone的Safari允許使用 @ font-face中的SVG文件;