當 @font-face 支持在 Firefox 3.5 中引入時,網站作者突然獲得了一種方法,可以顯著增強他們網站上使用的排版。隨著所有主要瀏覽器都將很快支持許多字體供應商提供的 WOFF 字體,網絡上可用的字體範圍遠比兩年前還要廣泛。
OpenType 格式長期以來一直為字體設計師提供了一種將豐富的變體集包含在他們字體中的方法,從連字和花體到小寫字母和表格數字。OpenType 規範描述了這些功能,使用唯一的特徵標籤識別每個功能,但它們通常僅適用於使用 Adobe InDesign 等專業出版應用程序的人。當為特定字符序列選擇字形並定位以進行渲染時,這些功能會影響字形選擇和定位。Firefox 目前使用字體的默認功能設置進行渲染;更有趣的是,為網站作者提供一種通過 CSS 控制這些字體功能的方法。
Firefox 4 中的許多新功能中包含了下一步,即直接通過 CSS 支持控制 OpenType 字體功能。該 -moz-font-feature-settings CSS 屬性 允許控制字體間距、連字、替換字形、真實小寫字母和風格集,僅舉幾例。
CSS3 字體規範包含許多 font-variant 的新子屬性。這些最終將為作者提供對字體功能的更好的控制,但對於 Firefox 4,僅支持低級別的 -moz-font-feature-settings CSS 屬性。有了這個,作者可以直接啟用和禁用 OpenType 字體功能
.altstyles {
/* format: feature-tag=[0,1] with 0 to disable, 1 to enable */
/* dlig = discretionary ligatures, ss01 = stylistic set 1 */
-moz-font-feature-settings: "dlig=1,ss01=1";
}
作為參考,可以在 這裡 找到註冊的 OpenType 功能的完整列表。FontFont 的人提供了一個 OpenType 功能的漂亮視覺指南。
連字和上下文替換字形
字體設計師通常會在他們的字體中包含簡單的連字和字體間距數據,但有些人會超越這些,並花費大量時間創建特殊的連字和上下文替換字形,以增強給定設計。來自 Underware 的 Bello Pro 手寫字體 是一種筆刷式設計,包含許多特殊的連字(點擊圖片查看)
請注意,“and” 和“by” 的特殊連字,所有小寫字母的使用以及替換字形的使用,以增強“Smooching” 中字母之間的手寫連接。這裡僅使用字體樣式,所有文本都可以被選擇和複製,示例頁面上沒有使用任何圖像。
數字樣式
使用 Adobe 的 Minion Pro(通過 Typekit 提供),下面的示例說明了表格、等寬數字形式的使用,以顯示易於閱讀和分析的數據列。當使用比例數字時,具有相同位數的較大數字的寬度會有所不同。通常,這需要使用不同的等寬字體。但使用提供數字格式功能的 OpenType 字體,作者可以使用單個字體,而無需放棄大型數據集的可讀性(點擊圖片查看)
字體默認可以使用表格數字形式或比例數字形式;提供對這些功能的訪問,允許作者在不切換字體的情況下,將比例數字用於內聯文本,將表格數字用於表格數據。
自動分數
美國菜的食譜通常使用分數。這些可以使用 OpenType 中的自動分數功能輕鬆呈現(點擊圖片查看)
上面的每個分數都以簡單的文本形式寫成(例如 2 1/2),沒有使用特殊的 Unicode 代碼點。對於支持自動分數的字體,OpenType 布局引擎會自動為用斜杠分隔的數字生成分數形式。這些通常僅限於簡單分數,對於更復雜的數學表達式,應改用 MathML 等標記語言。
語言敏感性
許多語言通常使用通用的文字,隨著時間的推移,使用上的差異自然而然地出現。塞爾維亞語、馬其頓語和保加利亞語都使用西里爾字母,但某些常用字符的字形略有不同。OpenType 字體支持指定特定於腳本和特定於語言的字形處理,因此,在頁面標記中提供了正確的 lang 屬性,Firefox 4 現在可以以特定於語言的方式呈現文本(點擊圖片查看)
任意功能
OpenType 使用一組底層原語來定義字體功能支持。這允許字體設計師創建他們自己的功能,無論是為了特殊目的,還是作為要包含在 OpenType 規範未來版本中的通用功能。由於 -moz-font-feature-settings 的語法允許使用任意功能標籤,因此這些標籤可以通過 CSS 訪問。
在下面的示例中,LettError 的字體設計師 Erik van Blokland 使用一組自定義設計的功能屬性,在將鼠標懸停在頁面上的文本上時創建了一個有趣的動畫效果(點擊圖片查看)
HarfBuzz,一個 OpenType 形狀引擎
過去,用於顯示文本運行的字形的選擇和定位過程始終通過平台庫完成,例如 Windows 上的 Uniscribe 和 OSX 上的 CoreText。為了確保跨平台更強大和一致的文本渲染,Firefox 4 將在所有平台上使用開源 HarfBuzz OpenType 形狀引擎。將來,這將允許我們整合對復雜的印度和東南亞文字的支持,這些文字在過去經常被忽視或支持不一致。
關於 Typekit 使用的說明
通過 Typekit 網絡字體服務提供的所有 Adobe 字體都允許訪問原始字體中找到的全部 OpenType 功能。但是,要訪問這些功能,您需要在發佈之前明確地在工具包編輯器對話框中的“語言支持”類別下啟用“所有字符”。
其他示例
(從 去年的博客文章 更新)
更新:示例的內容現在可以編輯!編輯每個示例的文本以試驗不同的字體功能。
48 條評論