顯示具有 Font 標籤的文章。 顯示所有文章
顯示具有 Font 標籤的文章。 顯示所有文章

思源黑體:Adobe 與 Google 合作開發的開放原始碼 CJK 字型

思源黑體是 Adobe 與 Google 合作開發的開放原始碼 CJK 字型,有七種不同粗細的字型系列,同時支援日文、韓文、繁體中文和簡體中文。

字體設計師 西塚涼子(Ryoko Nishizuka)正在設計思源黑體

Adobe Typekit Blog 文章的敘述,思源黑體各個系列中每種字體粗細總共有 65,535 個字符,整個系列總共接近五十萬個字符,全部都以開放原始碼的授權(Apache License 2.0)釋出,這樣大規模的免費字體是前所未見,對於亞洲的使用者而言,有很大的幫助。

自製中文網頁字形(Web Font)並內崁至網頁中(使用 CSS @font-face)

這裡教大家如何自己製作中文的字形檔,並轉為網頁用的字型格式,藉由 CSS 的 @font-face 功能在網頁中使用。


現在大部份的瀏覽器都可以支援 @font-face 這樣的自定網頁字型功能,但是到目前為止這項技術大部份都是應用於英文的字型上,而中文的字型檔由於大小通常都很大,如果讓使用者在看網頁文字時還要再下載好幾 MB 的字型檔,通常都會讓整個網頁效率大幅下降,所以大部份的網頁中的中文字都比較少使用自定的字型。

CSS 網頁字型 @font-face 使用教學與範例

這裡介紹 CSS 的 @font-face 使用方式與範例,讓網頁設計者可以在網頁的字型使用上更有彈性。


@font-face 這個 CSS 的 at-rule 可以讓網頁設計者可以使用網路上的字型檔來顯示網頁中的文字,甚至還可以讓設計者使用自己所提供的字型檔,讓網頁的設計更具有彈性,在選擇字型時就可以不需要考慮一般的電腦是否有安裝,凡是放在網路上的任何字型檔都可以使用。而 @font-face 除了在 CSS 的頂層設定上使用之外,在任何 CSS 條件群組(conditional-group)at-rule 中也可以使用。