# pre 標籤與通用字體 by Sz
###### tags: `Sz` `HTML` `2021夏季切版班`

有錯再跟我反應QQ
## `<pre>`是什麼
> [`<pre>` 的解釋 by MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/pre)
> 現在不點開沒關係，下方也會附上，到時候再看就好

但是跳過預備知識很難講，讓我先從前面開始說起
## `font-family`
在 `font-family` 我們會去定義頁面上的字體
避免字體檔案很大，拖垮網路速度，通常會建議使用內建字體
:::info
如果有更多美感的需求
可能會採用雲端字體（還有其他方法但這裡不提）
常見的有：
- Google fonts（全球、免費、中文就思源一套）
- justfont（台灣、付費、中文字體多）

漢字圈的字體使用邏輯跟西文圈是不一樣的
使用漢字一個字體檔案就是幾萬字起跳，檔案大小完全不能與西文字體相比。
（目前也先不提）
:::

## `font-family`的 `<generic-name>` 屬性
很遺憾的，每台裝置的內建字體其實都不一樣，windows、mac、android 等等等
很難真的針對所有人的設備去設定
所以有了這個`<generic-name>`屬性

這個屬性在設計師眼裡，就是我們的底線，不加不行
加了之後，至少所有人看這網站的整體調性會是一致的
你說你不懂整體調性？那你可以先跟設計師打一架了，還有，祝你最好不要遇到字體設計師
但其實我也不知道這是不是設計師的基本知識（哭阿）

- 黑體通常會為了螢幕顯示做最佳調整
- 明體通常在印刷上會有比較好的表現

但當然，你螢幕超好、印刷工具超高級，你選什麼字體都好，祝你客戶跟他的消費者都超有錢
一切都是預算決定
:::warning
認真講，字體選用還有其他內文跟標題的差別，這裡不提
:::

## 通用字體類型
- sans-serif
- serif
- monospace
- **還有更多**

### sans-serif
無襯線字體，意思就是筆劃從頭到尾幾乎都是一樣粗，中文通常字體名稱會叫「XX黑體」
### serif
襯線字體，被新細明體害慘的系列，與 sans-serif 相反，他就是筆劃有粗細變化的字體
通常中文會是 「AA明體」、「BB宋體」
搞不懂是什麼，至少不要在設計師面前說什麼 serif 都是新細明體，氣死
### monospace
等寬字體，等寬字體通常都是以上的字體，做成的等寬版本
平常排版很難用到，除非是需要程式碼風格

Hello monospace
11111 111111111
22222 222222222
Different words, but same width. // 英文寫錯鞭小力點

## 等寬與不等寬

## 中文字體的字體寬度
寫過作文就知道
漢字是方塊與方塊組成的，每一個字站一格，標點符號也佔一格
這就是漢字圈的使用方式，**純漢字的情況下本來就是等寬的**
我們沒什麼機會接觸到不等寬的狀況。

## 西文字體的字體寬度
### 不太正統的狀況
但用電腦時，有些人寫中文也會把全型半型混用
> 「像是這樣寫文章, 覺得這樣很棒, 或是不知道怎麼開全型標點符號.」

這就是混入西文字體的概念了，全型就是一格一格，半型則不遵守這個規定
恭喜你，你的中文文章大概永遠都會無法上下對齊
>像,這樣,
>歪歪的,句尾,
>就是有點,跟上排錯開.

### 正統的半型，西文字體
正統的半型就像是剛提到的 sans-serif, serif，與純漢字相反，這是西文的自然狀態

#### 魔鬼的細節
像這張圖，這個 ti 的寫法，字體設計師就可以設計好幾種，去符合各種需求
扯遠了，我們只需要知道他不等寬就好了

## 終於可以講 `<pre>`
> [`<pre>` 的解釋 by MDN](https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/pre)
> 對我沒打算細講，自己看

通常他是使用在等寬字體（monospace）的一種排版模式

為什麼會用等寬字體呢？因為等寬，所以不容易排版跑掉，大家都是一個一個對得很好
但跟上面說的一樣，這個不符合「自然的西文狀態」
除非特殊需求，不然他看起來就會很像程式碼喔XD

> 可能會想查查看 acscii art，用文字作畫的一種風格

我不負責任的覺得應該看到這邊，再去用 `<pre>` 應該就不太會出事了……吧