[譯]簡化的 Web 字型

 設計與排版是相輔相成的。但每當我想在我的網頁上使用特别的字型時，總是讓人十分頭痛，很難實作。因為這個原因，許多網頁設計師放棄使用這種方式，通過将文字處理為背景圖檔來解決這個問題。但這樣帶來了另一些問題，包括可通路性（注：針對盲人等殘障人士，例如他們需要文字朗讀功能）及頁面内容警惕性問題（圖檔不如文字那樣具有可調整性），有時候有必要對頁面渲染進行像素級的控制，但另外一些時候，我們希望由浏覽器和使用者來控制文字的排列和顯示。

在本文中，我主要介紹過去和現在浏覽器對 Web 字型的支援情況，使用的字型類型及如何在頁面标記中使用它們。

Microsoft 在 1995 年就已經在首個 Internet Explorer 版本中通過 FONT FACE 标記來支援嵌入字型，随後的 3、4、5 幾個版本又增加了 CSS 支援。不過，這種技術需要使用者的系統中已經安裝有要使用的字型。最後，Microsoft 提供了一個 WEFT 工具，讓大家可以将字型嵌入到自己的網頁中，使用者無需實作安裝該字型就可以正确浏覽該頁面。

在 Windows 中使用的大多數字型都是 True Type 字型。為了使我們的（特殊）字型能在 Internet Explorer 中使用，他們必須變成 EOT 格式。

TTF2EOT < MyFont.ttf > MyFont.eot

現在，需要使用的字型同時準備好了被浏覽器所使用的兩種格式，需要在網頁中引用該字型，然後在标記中調用。

要讓所有浏覽器都能正确顯示這種嵌入字型，其 CSS 代碼非常簡單。隻需按正确順序排列 @font-face 聲明，這樣所有浏覽器就都可以調用合适的字型資訊了：

聲明 font-face 之後，就可以像其他系統内置字型一樣使用了：

就是這樣簡單！準備好這種字型的兩種格式，然後以正确的順序引用它們，最後就可以在網頁中使用它了。

本文轉自wbpluto 51CTO部落格，原文連結：http://blog.51cto.com/wbpluto/476708，如需轉載請自行聯系原作者