@ font-face - 如何使其適用於所有瀏覽器

Question

Internet Explorer 9，Firefox，Opera，Chrome和Safari支持@ font-face規則。

但是，Internet Explorer 9僅支持.eot類型字體，而Firefox，Chrome，Safari和Opera支持.ttf和.otf類型字體。

注意：Internet Explorer 8及更早版本不支持@ font-face規則。

本文來自這里 。 所以為了讓IE9的@ font-face工作，我應該只指定EOT字體文件：

@font-face
{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9 */
}

特別是我使用Myriad Pro，我有OTF字體。 我如何將它們轉換為EOT類型？

關於IE7和IE8應該使用什么技巧/黑客來獲得所需的結果？

Answer 1

我認為這幾乎是完全跨瀏覽器

@font-face {
    font-family: 'Name';
    src: url('location.eot');
    src: url('location.eot#iefix') format('embedded-opentype'),
         url('location.woff') format('woff'),
         url('location.ttf') format('truetype'),
         url('location.svg#Name') format('svg');
    font-weight: normal;
    font-style: normal;
}

位置是服務器上的路徑，Name是字體的名稱

Answer 2

首先，您沒有嵌入大多數字體的版權 - 任何人都可以下載它們，因此將字體放在您的服務器上供某人下載也沒有什么不同。

我的建議是使用這里找到的字體squirrel工具： http ： //www.fontsquirrel.com/fontface/generator為你生成文件和代碼。

小心不要共享您無權使用的字體。

Answer 3

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome.woff2') format('woff2'), 
       url('/fonts/awesome.woff') format('woff'),
       url('/fonts/awesome.ttf') format('truetype'),
       url('/fonts/awesome.eot') format('embedded-opentype');
}

local（）指令允許您引用，加載和使用本地安裝的字體。

url（）指令允許您加載外部字體，並允許包含可選的format（）提示

Answer 4

Jacktheripper已經發布了一個很好的字體，

我推薦你關於該主題的以下好文章：

Paul Irish的文章

來自fontspring的文章

就個人而言，我使用Google Web Fonts並對此非常滿意。 您可以通過各種可用字體轉換字體，嵌入正確的代碼以及擔心版權問題。