iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 21
0
Modern Web

CSS大全閱讀筆記系列 第 21

第五章:字型(3)

  • 分享至 

  • xImage
  •  

(接上篇的使用@font-face {}部分)


  1. 使用@font-face {}
    d. 其他字型描述子:
    - font-variant:對OpenType字體做一些字體的特殊變體設定,如small-caps(小寫高度的大寫字、common-ligatures(連字設定)等,有很多功能,但除了small-caps支援度最好外,其他屬性值在使用前最好查詢支援度後再使用。
    - font-feature-setting:對OpenType字體做更多字體的特殊變體設定,如dlig(連字功能)、sups(上標)等,但在@font-face {}中目前只有firefox支援。
    e. unicode-range
    - 定義Unicode字元範圍內指定字碼範圍可用的指定字型,可以達到指定某種語種使用字型的功能。
    - 能讓文件出現某些字元時,才下載字型檔,可以加快網頁載入速度。
    - 指定範圍時,需由小到大,所以寫成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,指定日文片假名)。
    f. 結合描述子:
    - 可以用多個@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');}
    g. @font-face {}字型檔的支援問題:
    - IE6到IE9瀏覽器只支援EOT檔案。
    - 大部分的瀏覽器都支援Web Open Font(WOFF檔)。
    - IOS和Android手機支援的是TrueType(TTF檔),這也支援了絕大多數的行動裝置。
    - 早期IOS手機支援檔案為SVG字型檔。
    - 建議在寫@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,以防出現錯誤。

上一篇
第五章:字型(2)
下一篇
第五章:字型(4)
系列文
CSS大全閱讀筆記30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言