(接上篇的使用@font-face {}
部分)
@font-face {}
:font-variant
:對OpenType字體做一些字體的特殊變體設定,如small-caps
(小寫高度的大寫字、common-ligatures
(連字設定)等,有很多功能,但除了small-caps
支援度最好外,其他屬性值在使用前最好查詢支援度後再使用。font-feature-setting
:對OpenType字體做更多字體的特殊變體設定,如dlig(連字功能)、sups(上標)等,但在@font-face {}
中目前只有firefox支援。unicode-range
:U+400-300
是不正確的,應該要寫成U+200-300
才是正確的。unicode-range: U+590-599;
(指定希伯來文),可以指定單一字元,如unicode-range: U+A5;
(指定日圓符號),可以用半形逗號分隔指定多個範圍,如unicode-range: U+FF00-FF9F, U+3000-30FF;
(指定日文平假名、片假名),還可以用半形問號(?)這個萬用字元來代表所有可能數值,如unicode-range: U+30??;
(代表U+3000-30FF,指定日文片假名)。@font-face {}
結合其他字型描述子,使斜體和粗體這種特殊標示顯現不同的字型,但所有的字型描述子都不支援inherit
這個關鍵字。@fontface{font-family: "Helvetica"; src: url('Helvetica.oft') format('open-type');}@fontface{font-family: "Helvetica"; font-weight: bold; src: url('Helvetica-Bold.oft') format('open-type');}@fontface{font-family: "Helvetica"; font-style: ilalic; src: url('Helvetica-Ilalic.oft') format('open-type');}
@font-face {}
字型檔的支援問題:@font-face {}
的時候,應該把上述檔案都包括其中,以支援最多裝置使用,所以寫成@fontface{font-family: "Helvetica"; src:url("Helvetica.eot"), src:url('Helvetica.eot'); src: url('Helvetica.eot?#iefix') format('embedded-opentype'), url('Helvetica.woff') format('woff'), url('opensans.ttf') format('truetype'), url('Helvetica.svg#Helvetica') format('svg');}
,其中IE6到IE9瀏覽器要加?#iefix,以防出現錯誤。