陳昱維/千秋

Hi,

千秋です！

• 台大開源社/模型社
• 據說是個有趣的神奇傢伙
• 喜歡可愛（萌）的東西
• 兼任研究助理、見習設計師
  以及見習小狐仙

Please visit

aki.maid.cat

原本報40分鐘的Talk

廢話不多說
開始吧！

現在只有10分鐘

親友傳來的電子郵件。
讓通勤、通學的時間變得更有意義的書籍。
從一大早睜開眼到睡前，您會遇見多少文字呢？
太過於理所當然，幾乎不在人們的意識裡留下印象的「文字」，一直存在於您的身旁。 」

「

以文字貢獻社會。

自古以來，人類透過說話、使用文字，分享自己獲得的知識及想法。
作為傳達資訊的方式，文字可以跨越時間和地點，富含強勁的力量。

歷史上的人物、眾多的人們在思考什麼、想傳達什麼。
文字是讓其得以傳達的貴重發明。

むすび
 

除了是繩結、連接之外，唸法也同生產創造之神「産霊（むすひ）」

連接繩線是結，連接人與人是結，時間的流動也是結，這全部都是神明的力量

我們做的結繩（むすび）也是神明的作品，正是時間流動的體現：聚在一起、成型、扭曲、纏繞，有時又還原、斷裂，再次連接。這就是所謂的結び，這就是時間。

新海誠《你的名字》

Outline

1. 基本的字型知識
2. 製作字體介紹
3. Web font
4. Web font 壓縮​
5. 幾個開源字體介紹
6. Commercial solution
7. 系統內建字體選用指南
8. Bonus

Ch.

GG

可是我會努力讓大家趕快去吃點心的> <

Ch1.基礎

字體不是電腦自動(ry
不是電腦裡就有(ry

好了，不要再想莊峽喵了

↑ FontLab Studio 5

The pro one

Ch2.製作字體

Glyphs

The recommend one

野生的 名詞 出現了！

• OpenType font (OTF)

• TrueType font (TTF)

• Auto hinting

• WOFF(2)

OTF/TTF

輪廓字體描述檔

Auto hinting

用數學使輪廓柵格化

Ch3.網頁字型

• WOFF2

• WOFF

• EOT

• TTF

Check it on caniuse.com

但是，

如果你還是想成為

正義的夥伴的話

「要拯救所有人是不可能的」

「但是追求這個理想絕不是個錯誤」

• 將 WOFF 2.0 提供給支援的瀏覽器

• 將 WOFF 提供給大多數瀏覽器

• 將 TTF 提供給舊版 Android (4.4 版以下) 瀏覽器

• 將 EOT 提供給舊版 IE (IE9 之下) 瀏覽器

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-jp.woff2') format('woff2'), 
       url('/fonts/awesome-jp.woff') format('woff'),
       url('/fonts/awesome-jp.ttf') format('ttf'),
       url('/fonts/awesome-jp.eot') format('eot');
  unicode-range: U+3000-9FFF, U+ff??; /* Japanese glyphs */
}

...unicode-range...?!

Ch4. Web font 壓縮

Unicode-range 子集內嵌

在亞洲語言中，字符的數量要比西方語言中多得多

拉丁字包含大小寫與各種符號

加起來約100字（數十KB）

中文的字數上看一萬三千多個

（而且比較複雜！）

要用上 MB 來衡量

But

@font-face {
    unicode-range: U+3000-9FFF, U+ff??;
}

就是有些瀏覽器不支援

自己來幹？

font-spider.org

只能把網頁的文字全喇進去
不支援高端黑魔法字型
壓縮用會降低品質的方法 」

「

—江宗儒, 2017

「然後幹不要放我名字啦

    有種講的話莫名被塞到動畫裡的動物園大哥哥的感覺（ 」

台北帝國動物公園    宗儒大哥哥(台北)

Ch5.推薦的開源字體

往日時光：王漢宗、文泉驿

近代：思源黑體（Noto）

花園明朝

M+ fonts

Ch6.有錢好辦事

線上字體解決方案

Typekit             2w5 PVs/m free

Google fonts           no limits*

TypeSquare        1w PVs/m free

Justfont            10w PVs $348/y

文鼎雲字型           5w PVs $499/y

文鼎，加油喔

曾控華航使用其「文鼎毛楷」　文鼎道歉了

2017年02月15日09:27

中華航空去年引進A350客機，並網路票選「帝雉號」字體，今年1月公布票選結果為楷體後，遭文鼎科技打臉，指華航未經授權即使用文鼎設計開發的「文鼎毛楷」，引起華航抗議。文鼎科技昨在其官網上道歉了。文鼎科技在道歉文表示，在華航帝雉號採用的字型是楷體，文鼎確認是「文鼎毛楷」即發函給華航求證時，在未獲華航回覆前，即為文表達「未經授權而使用字型」訴求，確有行事不周，對華航造成困擾和商譽損失，致上最深切的道歉。（戴安瑋/台北報導）

Ch7.系統內建字體

選用指南

{
    font-family: 
    "Noto Sans TC",
    "source-han-sans-traditional", 
    Arial, 
    "文泉驛正黑", 
    "WenQuanYi Zen Hei", 
    "儷黑 Pro", 
    "LiHei Pro",
    Meiryo,
    "Yu Gothic", SimHei /*日文漏字備用*/
    "Microsoft YaHei",
    "微軟正黑體", 
    "Microsoft JhengHei", 
    sans-serif;
    
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always;
}

Demo

自肥時間

aki.maid.cat