用System Font Stacks系統字型設定WordPress網站

本文介紹WordPress網站如何使用System Font Stacks系統字型進行設定，而不使用Google Fonts這類網路字型（web fonts）。

需求說明：

在我們製作WordPress網站時，一定會需要設定字型（fonts）。在一般情況下，我們選擇的佈景主題（theme）和網頁編輯器（editor或page builder），會預設某一種字型，而且通常會是Google Fonts。Google Fonts的字型檔案存放在Google的字型網站上，當訪客讀取我們的網頁時，瀏覽器才會去Google網站抓取該字型來使用，以正確顯示字型。可以想見，使用Google Fonts或多或少會延長網頁的讀取時間，而如果我們在製作網頁時缺乏良好規劃，比如同一網頁中設定了多種Google Fonts字型，就會導致網頁的讀取時間更長，而這往往是不必要的。

更進一步地說，如果你希望你的網站（無論內容是中文或外文）能讓中國境內的網友可以順利瀏覽，那麼，不使用Google Fonts可能就變成必要的設定。因為目前為止，從中國境內無法正常開啟與瀏覽Google相關的網站（包括Google搜尋引擎、YouTube、Blogger、Gmail等），WordPress網站若設定為必須到Google網站抓取字型，可能會導致中國網友發現網頁讀取緩慢甚至完全打不開。

其實，要解決以上問題，方法有好幾個。例如我們可以把要使用的Google Fonts檔案，存一份在網站主機中，這樣一來瀏覽器就不必去Google網站抓取，這個稱為self-hosted google fonts。同理，我們也可以選擇非來自Google的網路字型，或許就不會有被擋的問題。如果你是對字型比較講究，也就是要求網頁一定得用某個特定字型來顯示，那就只能朝這類解決方案去執行。

另一方面，如果網站設計者對字型的選擇沒有那麼講究（只希望基本簡潔美觀），也希望盡量避免抓取字型拖慢網頁讀取的速度，那麼不妨考慮用系統字型組合（System Font Stacks）的設定。

什麼是System Font Stacks

先說明System Font，系統字型顧名思義指的是操作系統內定的字型，因為是內定，所以本來就存在於操作系統內（也就是訪客的電腦內、手機內），不需要去別的網站（如Google）抓取字型檔案，也不需要網頁設計者把字型檔案存一份在WordPress網站主機裡。

要注意的是，各家操作系統內定的系統字型不盡相同。舉一個簡單的例子，Windows系統的內定無襯邊英文字型常見的有Arial、Tahoma、Trebuchet MS、Verdana等，這幾種英文字型在Mac OS系統裡剛好也是基本字型，但是像Geneva、Helvetica這兩種字型則是Mac OS系統內定，但微軟基本上不支援的。

更需注意的則是中文字型。以無襯邊字型來說，例如微軟的繁體中文系統字型有微軟正黑體，Mac OS系統的中文系統字型則有蘋方體（PingFang TC）。

目前較普及的操作系統有Mac OS, Windows, Android, Ubuntu, Linux等，出於各家系統字型的差異，就有必要設定一組字型來兼顧各家操作系統的狀況。

系統字型組合（System Font Stacks）就是從各主要操作系統的內定字型中挑選你想要的字型，組成一個套餐，這樣一來，不管訪客使用哪個操作系統來開啟網頁，都有至少一個內定的系統字型可以適用。

有人會問，如果不顧各家操作系統的內定字型，會有什麼結果？

舉例，如果在這個字型組合中只指定了Mac OS有的字型，而沒有納入Windows支援的字型，那麼當訪客是用IE或Edge開啟網頁，顯示的字型就是隨便系統決定。

再者，如果指定了英文字型但未指定中文字型，那麼也是任由操作系統根據其內建的規則（詳細規則為何並不清楚）去顯示中文。

由上可知，指定System Font Stacks的邏輯是對操作系統設定字型建議，以便對網頁顯示字型有一定程度的控制，而且是兼顧多個操作系統的狀況。其缺點則在於，無法百分之百控制到底結果會用哪種字型來顯示。

如何設定System Font Stacks

有關各操作系統的內定字型是什麼，在此就不贅述，有興趣可在網上查到（可以用system font stack去搜尋）。以下直接說明在製作WordPress網站時，如何設定System Font Stacks。

影響WordPress網頁字型設定的因素有好幾個，這幾個因素都要考量並正確設定，才能得到效果。牽涉到字型設定的有以下幾個地方：

1. 佈景主題（Theme）的基礎設定
2. 頁面編輯器（Editor/Page Builder）的基礎設定
3. 頁面內每個文字框的設定
4. Additional CSS （我們要在這裡加入System Font Stacks的指令）

先說明，我使用的佈景主題是Astra，頁面編輯器是Elementor。如果你使用的是不同的主題和編輯器，有可能設定的位置不同，但基本邏輯應該是相通的。

基本的邏輯就是，我們要先把基礎設定、頁面設定都設為default，頁面文字框也不要另外設定，最後再透過Additional CSS指令設定System Font Stacks，使這個設定通用於所有頁面。

1. 佈景主題的基礎設定：
進入WP後台，左邊清單找到Appearance>Customize>Global>Typography>Base Typography，在Family這裡要設為Default System Font
回到上一層，進入Headings，所有的Family都設為inherit

2-1. Elementor編輯器的基礎設定：
WP後台的左邊清單找到Elementor>Settings，Disable Default Fonts的選項打勾，並儲存設定（這裡的Default Fonts指的是Elementor自己內定的字型，而我們並不使用它）。

2-2. Elementor編輯器的通用設定：
開啟某個用Elementor編輯的網頁，進入編輯模式，在功能選單的左上角，漢堡按鈕點進去。
Site Settings > Global Fonts > 點擊每個鉛筆圖案，把字型都設為Default。

3. 頁面內文字框的設定：
如果你曾經在編輯頁面或文章時，針對個別文字框設定過網路字型，就必須回到文字框中取消網路字型，改為Default或inherit或空白。

4. 以上三處的設定完成後，現在要透過Additional CSS指令，設定我們想要的系統字型。
WordPress後台左邊清單，Appearance>Customize>Additional CSS

以下範例中的英文字型部分，我是參考了網路上的建議。然後以此為基礎，加上中文字型。這裡我選用的中文字型都是黑體（無襯邊），如果你想要使用別種字型，請自行搜尋可用的來替換即可。

黑體的簡體中文字型有以下：

Microsoft YaHei, 微软雅黑
Microsoft YaHei Light, 微软雅黑 Light
PingFang SC（苹方字体）
Hiragino Sans GB（冬青黑体）
Source Han Sans CN（思源黑体简体）
Noto Sans CJK SC（思源黑体简体）

CSS指令如下（請注意，字型名稱若為兩個字以上，需加上英文引號。前四級標題h1, h2, h3, h4，我用細字版的微軟雅黑，顯示的字體比較不會太胖）：

body, h5, h6 {font-family: "Microsoft YaHei", "微软雅黑", "Microsoft JhengHei", "微軟正黑體", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Noto Sans CJK SC", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}

h1,h2,h3,h4 {font-family: "Microsoft YaHei Light", "微软雅黑 Light", "Microsoft JhengHei Light", "微軟正黑體 Light", "PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Noto Sans CJK SC", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}

黑體的繁體中文字型：

Microsoft JhengHei, 微軟正黑體
Microsoft JhengHei Light, 微軟正黑體 Light
PingFang TC（蘋方字體）
Hiragino Sans TC（冬青黑體）
Source Han Sans（思源黑體繁體）
Noto Sans CJK TC（思源黑體繁體）

CSS指令如下（請注意，字型名稱若為兩個字以上，需加上英文引號。前四級標題h1, h2, h3, h4，我用細字版的微軟正黑體，顯示的效果比較好，不會太胖）：

body, h5, h6 {font-family: "Microsoft JhengHei", "微軟正黑體", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang TC", "Hiragino Sans TC", "Source Han Sans", "Noto Sans CJK TC", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}

h1,h2,h3,h4 {font-family: "Microsoft JhengHei Light", "微軟正黑體 Light", -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Helvetica, Arial, "PingFang TC", "Hiragino Sans TC", "Source Han Sans", "Noto Sans CJK TC", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";}

以上就是System Font Stacks的設定方式。建議字型設定完成後，使用GTmetrix之類的測速網站檢測一下，從Waterfall chart的讀取紀錄中檢查是否已經沒有Google fonts網路字型的請求。

如何執行Python程式

執行程式一般都叫「跑程式」，也就是下了「指令」給電腦裡的應用程式之後，它會跑出結果來。其實，計算加減乘除的計算機，可以說就是最簡單的程式執行工具：按鍵輸入「1+1=」，運算的結果（2）就會立即出現在螢幕上。

Python也是下指令之後讓應用程式跑出結果來。基本上也是輸入1 + 1，並按「enter」鍵，就會得出結果（2）。不過，Python的功能當然不是只用來做數學運算，未來我們學習了各種程式碼之後，就能下更複雜的指令給Python去執行。在此，我們須先知道，指令要下在哪裡？

下指令給Python有兩種主要形式。第一種是下指令時，才逐字輸入指令（程式碼），這適合用在程式碼只有單行，簡單不複雜的情況下。第二種則是先把指令（程式碼）寫好存在一個副檔名為.py的純文字檔案中，這適合用在程式碼內容較多且較繁雜的情況下。

Mac作業系統中，如何對Python下單行指令？

點開「應用程式」檔案夾，找到「工具程式」中的「終端機」，點開後，在游標處輸入「Python3」，啟動Python 3程式，就可以在>>>的符號之後輸入指令。例如：

>>>print ('hello world!')
hello world!

>>>三個箭頭符號後面輸入的是指令。而下一行的hello world!則是指令執行的結果。

如果要從Python的程式環境中退出，請輸入「exit ()」。如果要從終端機的環境中退出，請輸入「exit」。

另一種下單行指令的方式是使用IDLE軟體。IDLE是隨附Python安裝時內建的應用軟體，點開IDLE之後會直接啟動Python。看起來跟終端機的形式很像，但是它有「智慧」，會自動用顏色標註不同的Python語法（syntax），稱為語法亮顯（syntax highlight），讓人容易識別。

IDLE軟體就放在Python 3.x的檔案夾中：進入「應用程式」，找到Python 3.x的檔案夾，裡面就有IDLE或IDLE.app的程式，點開它即可。


儲存程式碼的*.py檔案怎麼來？

要讓Python執行 *.py檔案中的指令，首先要準備好一個 *.py的檔案。檔案的副檔名必須是 .py，而且檔案中的內容必須是純文字UTF-8格式。由於一般常用的文字編輯器，如Word、記事本、備忘錄、文字編輯等，容易夾帶純文字以外的格式設定，會造成Python讀取出問題，因此最好是使用一個專門用來編輯與儲存程式碼的編輯器，方可一勞永逸。


***********************
網路上有一款免費的程式碼編輯器ATOM，適合用來撰寫、編輯和儲存程式碼。它的下載和安裝也不困難。

ATOM官網：https://atom.io/
For Mac OS X的下載方式：連上官網，下載檔案。把檔案拖曳到「應用程式」資料夾中。
ATOM的開啟方式：只要在「應用程式」點開ATOM檔案，就可以開啟ATOM來使用。開啟後，點開左上角的untitled頁籤，這裡就是輸入程式碼的地方。輸入或編輯之後，按照一般方式進行存檔。記得副檔名是py哦！
***********************


Mac作業系統中，如何讓Python執行 *.py檔案中的指令？

方法一：
開啟「終端機」，輸入「Python3」，啟動Python 3程式（此時可以看到游標出現在>>>符號之後）。鍵入「python」再加一個空格，然後把要執行的*.py檔案，拖曳到程式視窗中，並按「enter」鍵，程式就會執行。

方法二：
在IDLE軟體環境下跑程式，須從頂部選單去找到並開啟*.py檔案。再說一次，IDLE軟體的位置就在Python 3.x的檔案夾中。

從IDLE的頂部選單「File」中，點選「Open」來打開一個預先寫好的*.py檔案。接著再點擊頂部選單「Run」中的「Run Module」，就可以執行檔案中的程式碼。

IDLE軟體本身也提供編輯程式碼的功能，意思是可以編寫新的程式碼並存檔（步驟是：點開選單「File」中的「New File」，打開空白的頁面，輸入python指令，然後再選「File」中的「Save」存檔即可）。新的程式碼須先存檔後，才能Run Module執行。

了解了在電腦中執行Python程式的方式，接下來就開始學點程式碼吧！

Python安裝流程 for Mac（MacOS）

想要學習Python程式語言，首先要設置可以執行這類程式的環境，也就是在自己的電腦裡下載軟體、安裝軟體、改變設定，以便後續的程式設計和執行可以很順暢。

Python的一個好處是，在Windows和Mac的電腦裡都可以安裝使用。（其實在Linux/UNIX也可以安裝，但我估計會使用這種系統的人不需要來閱讀本文。）由於我打算在Mac筆電中使用，所以我下載的是for MacOS的最新版本 Python 3.8.1（版本會持續更新，當你去下載時，有可能已經發佈了新版，只要直接選擇最新版本下載即可）。

就如同Windows和MacOS每隔一段時間會推出系統新版本，Python也會不斷更新，每隔一段時間就發布新版本。要注意的是，目前有Python 2.x和Python 3.x兩個系列。舊的系列都還有人在用，所以不可能馬上廢除。新舊系列會並行一段時間，但對於新進的學習者來說，可以直接選擇學習新版本，日後再留意新舊版本的差異即可。

MacOS作業系統已經內建Python 2.x

在MacOS作業系統中已經內建了Python 2.x，這件事我也是開始學了才知道！如果你想直接執行Python 2.x，請打開「應用程式」，在「工具程式」裡找到「終端機」並點開。

如果想要知道你Mac電腦裡的Python 2.x是哪一個版本，可在游標處輸入「python --version」，並按「enter」鍵，版本訊息就會顯示出來。（如下圖）

如果在游標處輸入「python」，並按「enter」鍵，就能夠開啟Python 2.x程式（如上圖）。（這裡看到新版的MacOS提示，Python 2.7雖然是內建的Python版本，但未來將會停用，建議使用者改用Python 3.x。）

Python程式的命令列開頭是「>>>」三個單箭頭。如果要離開（關閉）Python程式，在「>>>」之後輸入「exit ()」，並按「enter」鍵，這樣會回到終端機程式（如上圖）。
附帶說明，如果要離開（關閉）終端機程式，則是輸入「exit」，並按「enter」鍵（如上圖）。

MacOS作業系統中安裝Python 3.x

雖然MacOS推薦使用Python 3.x，但是似乎並沒有內建這個版本。

我進入終端機程式後，試著輸入「python3 --version」，得到的結果是找不到這個開發者工具（no developer tools were found）。並且跳出一個對話框，問我是否要立即安裝工具。既然如此，我就點選「安裝」吧！

點擊「安裝」後，跳出「命令列工具許可協議」，我看了一下，發現這個所謂的「開發者軟體」似乎包含了多個程式，但是它沒有寫明到底包含哪些程式，我只看到有提到QuickTime開發軟體，以及第三方軟體。雖然我很信任蘋果公司的產品，但是對我來說，目前並沒有需要下載多餘的工具程式。所以我決定不用這個方式下載安裝Python 3.x。點選「不同意」跳出。

自己從Python官網下載新版，安裝到Mac電腦，算是相當簡單快速。
先打開Python官網https://www.python.org/，找到「Download」（這裡看到最新版本是Python 3.8.1），點進去。

點開後的頁面是最新版Python 3.8.1的說明。拉到頁面最後一單元「Files」，找到Mac OS X的下載版本，點擊，出現對話框，點擊「允許」，就會開始下載檔案。

在Safari瀏覽器右上角可以找到「顯示下載項目」（圖標是一個箭頭朝下）。檔案下載完畢後，點開它，就會開始安裝流程。

經過一連串的確認、同意，以及輸入開機密碼後，安裝完畢，看到「已成功完成安裝」的字樣。

距離安裝完畢還有一步：如上圖，在「安裝Python」的完成對話框內，提示Python需要一組SSL root certificates。安裝的方式是在Python 3.8的檔案夾內，找到Install Certificates.command，點選雙擊之後，它會打開終端機程式，執行安裝，並自己結束程式。到此，安裝步驟已完成。

Python 3.8應用程式放在哪裡？點擊「Finder」圖標，從左邊的「喜好項目」中找到「應用程式」，Python 3.8的檔案夾就在裡面。

開啟Python 3.x

下載軟體一段時間之後，很容易就會忘記是哪一個版本。開啟「應用程式」—「工具程式」—「終端機」，輸入「python3 --version」，就可以顯示版本訊息。

如何開啟Python 3.x？與開啟Python 2.x的方法類似：開啟「應用程式」—「工具程式」—「終端機」，在游標輸入「Python3」，並按「enter」鍵。離開（關閉）程式的指令則是「exit ()」。

認識層疊樣式表Cascading Style Sheets (CSS)

層疊樣式表的原文Cascading Style Sheets，簡稱CSS，是用來設置網頁「樣式」的一套規則，所謂的樣式（style），包括字型、字體大小、行高、顏色、邊距、格線等。過去，網頁的樣式是以HTML標記語言來設定，但是後來，樣式的部分被分離出來，改用CSS來設定。CSS有幾個特點：

*簡單的說，HTML是用來標示網頁的「架構」，CSS則是用來設定網頁的「樣式」，兩者各司其職。

*CSS和HTML是兩種完全不同的「語言」，有各自的指令寫法，不能混淆。

*一般標準的做法，是把網頁的架構寫在.html文件中，把網頁的樣式寫在.css文件中。由於.html文件中會註明所搭配的.css文件名稱和存放位置，當瀏覽器在「開啟」某個.html文件時，就會去抓取指定的.css文件來使用，以便呈現該有的樣式。

*通常網站都會包含多個網頁，也就是有多個.html文件。這些網頁文件可以「共用」同一份.css文件，也就是使用同一個樣式表。由此想見，這樣可以確保網站上所有.html文件的樣式是統一的。再者，一旦有需要修改網頁樣式時，只要把那一份.css文件修改好，所有.html文件的樣式就都跟著修改好了。


*************如何在.html文件中指定.css文件
把CSS樣式設定儲存在名為.css的純文本文件中（稱為「樣式表」或「外部樣式文件」），然後在原先的.html文件中，創建一個外部鏈接，連到這個.css文件，這樣就可以讓多個.html文件共用CSS文件。事實上這就是許多網站的設置方式。在<head></head>區塊內，使用<link>標記來指定CSS樣式設定。

如何在.html文件中鏈接到.css文件：
....
<head>
<meta charset="UTF-8">
<title>標題</title>
<link type="text/css" rel="stylesheet" href="xxxx.css">
</head>
....
*************


*其實CSS樣式設定也可以直接寫在.html文件中。有兩種可能的方式：
1）如果網頁製作者沒有權限修改伺服器主機上的.css文件，但是有權限可以修改完整的.html文件（也就是牽涉到<head></head>的區塊），那麼他就可以在<head></head>區域，把CSS的指令直接寫在<style></style>標記之間。
2）如果網頁製作者沒有權限修改原始的.css文件及.html文件，只被允許在網頁的局部添加內容（例如大多數的網誌/部落格），那麼他可以利用HTML標記中的style屬性來指定樣式，例如<div style="padding: 10px; color: gray;">。


CSS樣式的語法

雖然CSS的語法和HTML的語法不相同，但兩者都還算是相當直觀，容易理解，學習起來並不困難。最基本的樣式表示法，就是「樣式名稱+冒號+樣式值+分號」，例如：

background-color: yellow;
font-size: 150%;

是不是一看就能理解？這裡帶出學習CSS的前兩個要點，一是要熟悉常用的樣式名稱，二是要熟悉對應的樣式值寫法。例如，padding（邊距）這個樣式，有好幾種不同的表示方式：

padding: 10px 5px 15px 5px;
四個數值依序代表上邊距、右邊距、下邊距、左邊距（順時針方向）。

padding: 10px 5px;
只寫兩個數值時，第一個代表上下邊距各為10px、第二個代表左右邊距各為5px。

padding: 10px;
只用一個數值時，代表上下左右的邊距都各為10px。

left-padding: 10px;
單獨指定左邊距。

right-padding: 10px;
單獨指定右邊距。

top-padding: 10px;
單獨指定上邊距。

bottom-padding: 10px;
單獨指定下邊距。

請留意，CSS指令中的「冒號」和「分號」都是不可缺的一部分，若是漏寫或寫錯，會導致樣式無法正常顯示。

熟悉了樣式名稱和樣式值寫法之後，第三個要點是了解如何把樣式指定給網頁中的特定段落，例如針對第一級標題<h1>設定樣式。不過，在.css文件中，通常都會先針對「整個網頁」（也就是<body>這個標示）設定基本的網頁樣式，例如字型font-family、字體大小font-size、字體顏色color、背景顏色background-color等。

完整的樣式設定，必須包含HTML標記名稱+一對花括號，然後在花括號內寫出樣式設定。例如：

body {
      background-color:  gray;
      font-family: Verdana, Arial, sans-serif;
      color: black;
      font-size: 12px;
      }

接著，再針對各層級的內容區塊，例如標題<h1>~<h6>或段落<p>進行設定。例如把<h1>標題文字設定成150%大小，把<h2>標題文字設定成120%大小。在下面的範例中，還可看到對<h1>、<h2>同時設定字體顏色為灰色，標示方式為「h1, h2」兩個標記以逗號分隔。

<html>
 <head>
     <meta charset="UTF-8">
     <title>網頁標題</title>
     <style type="text/css">
   body {
         background-color:  gray;
         font-family: Verdana, Arial, sans-serif;
         color: black;
         font-size: 12px;
         }
   h1, h2 {
           color: gray;
           }
   h1 {
       border-bottom: 1px solid black;
       font-size: 150%;
       }
   h2 {
       font-size: 120%;
       }
     </style>
 </head>
<body>
<h1>網頁第一級標題</h1>
<h2>網頁第二級標題</h2>
<h2>網頁第二級標題</h2>
<p>段落內容</p>
</body>
</html>

如前所述，對<body>的樣式設定是最基礎的設定，適用於整個網頁內容（包括<h1>、<h2>）。但是若後面又針對<h1>、<h2>等標記設定了樣式，這些樣式設定值就會覆蓋（也就是取代）<body>的設定值。例如，在<body>中設定了字體顏色是黑色，但是後面又對<h1>、<h2>設定字體顏色是灰色，則灰色的設定會適用於<h1>、<h2>這兩個層級的標題。

延伸問題：如果想把某一個<h2>標題文字單獨設定成藍色，又該怎麼做？邏輯上，必須把那個<h2>「做個記號」，設定一個id名稱或是class分類名稱，這樣就能在style樣式設定時，特別標註那個特定的<h2>，並設定專屬的樣式（範例請見本文的最後一段）。


CSS的常用樣式有哪些？

能夠設定的樣式還滿多的，但如果不是重度使用者（例如網頁設計師），可以先從一些常用的樣式開始熟悉就好。以下列出一些樣式名稱，建議在設計網頁時用用看。如果調試出自己喜歡的樣式組合，不妨存檔備用，供作日後再次使用的範本，這樣就不必每次設計網頁都從零開始了！

font-family 字型   （以逗號分隔，例如：Verdana, Arial, sans-serif）
color 字體顏色
font-weight 字體粗細   （lighter；normal；bold；bolder）
font-size  字體大小   （可用像素或百分比表示，例如：14px或120%）
font-style 斜體文本   （normal；italic；oblique）

background-color 背景顏色
background-image 背景圖像
border-color 邊框顏色

line-height 行高
text-align 水平對齊   （left左對齊；center居中；right右對齊）
text-decoration   (underline；line-through；overline；none)

border 邊框
border-bottom 邊框底部
padding 內邊距
list-style 列表外觀


font-family的設置

*網頁字型可分為5類：sans-serif, serif, monospace, cursive, fantasy，每一類包含多種不同的字型。
*常看到的serif和sans-serif並不是指某款特定字型的名稱，而是代表某類字型。serif是有襯邊的字型，sans-serif是無襯邊的字型。

1. serif: 有襯邊的字型，例如Times, Times New Roman, Georgia，常用於報紙雜誌的印刷體。
2. sans-serif: 無襯邊的字型，例如Verdana, Arial, Arial Black, Trebuchet MS, Geneva，常用於網頁，因為無襯邊的文字比較簡潔，在電腦、手機屏幕上閱讀比較輕鬆。
3. Monospace: 字母的間距相同的字型，例如Courier, Courier New, Andale Mono，它是模擬打字機打字的效果，常用於表示編程代碼。
4. Cursive: 仿手寫效果的字型，例如Comic Sans, Apple Chancery。適合用在活潑、不正式、年輕主題的文字。
5. Fantasy: 具裝飾性的特殊字型，例如Last Ninja, Impact。可做特殊效果用，但不適合用來顯示閱讀用的長段文字。很少用在網頁文字中。

*font-family樣式可以一次設置多種字型，字型的英文要拼寫正確（含大小寫），並以逗號隔開。如果字型的名稱中間有空格，如Courier New，該字型名稱要用引號，如"Courier New"。
*通常每次設置的多個字型會屬於同一個字型類別，例如全都是sans-serif或都是serif。
*即便在font-family設定了某款你喜歡的字型，卻不一定能在瀏覽器顯示，或是你會發現同一個網頁在不同的瀏覽器（例如Chrome、360、SAFARI）畫面中，顯示出來的字型不一樣。網頁設置的字型能否顯示，要看瀏覽器所在的電腦是否支援該字型。不同的電腦操作系統（如Windows、Mac）默認支援的字型不同。
*實際運用上，我們會對font-family設置多個字型，並且把偏好的字型寫在前面。利用這樣的設置把偏好的字型優先列舉出來，以增加對字型的控制。
*瀏覽器讀取網頁時，會按照字型設置的順序來顯示。例如font-family: Verdana, Arial, sans-serif; 如果電腦有支援Verdana字型，就以Verdana顯示文本，沒有的話就用Arial....以此類推。若是標明的字型都不支援，瀏覽器就會在sans-serif字型類別裡找一個默認的字型來使用。
*因此，設置字型時，通常最後一個會寫sans-serif或serif，五類字型中的一類。


CSS標記的分類運用

*雖然CSS可以針對不同標記如<h1>、<h2>、<p>創建樣式，但如果想要對特定一個<h2>設置專屬的樣式，該怎麼辦？可以的，只要先對不同的<h2>作分類（注意：是在.html文件中，將<h2>做標記）。

步驟：
1. 在.html文件中，利用class屬性對<h2>分類，例如：
    <h2 class="general">...........</h2>
    <h2 class="promote">...........</h2>
2. 接著，在.css文件中，指定各自的樣式：
    h2.general { color: blue; }
    h2.promote { color: red; }

*不只是<h2>，其他的標記也可以使用class這個屬性來分類。例如<div>、<blockquote>等。

步驟：
 .html文件里寫： <div class="promote">
 .css文件里寫：  div.promote { color: red; }

*同屬一類的樣式規則可以寫在一起：
 例如可以寫成：h2.promote, div.promote { color: red;}
 還可以簡單寫成： .promote {color: red;}

*一個標記可以設定多個分類名，例如：<p class="premium female">，這裡有兩個分類，一個是premium，一個是female，之後再到.css文件中為不同的分類制定規則。
 例如： p.premium { color: brown;}
           p.female { text-decoration: underline;}

*驗證CSS語法的網站工具：http://jigsaw.w3.org/css-validator/

CSS表格：頁面佈局與定位

CSS（層疊樣式表）提供了表格佈局的功能，讓網頁設計者可以把網頁內容劃分成不同區塊（例如主版面main和側欄sidebar）。透過CSS指令分割之後，就可以將網頁內容佈置在不同區塊中，並且透過CSS的樣式指令來統一設置或變更各區塊的樣式。

本文介紹CSS表格的概念。若有興趣了解HTML表格，可點選HTML表格介紹。


CSS表格的基本概念

*以HTML標記和CSS指令，把各區塊內容（例如#main和#sidebar）放置在不同的單元格設置中，使其形成網頁佈局。
*表格的基本架構：本文中，我以橫列（row）、直行（column）、單元格（cell）來稱呼。
*CSS表格的設置名稱：table、table-row、table-cell。
*每個單元格里的內容，要以HTML「塊元素」的形式存在，例如<p></p>或<div></div>。

以下示範把網頁分成#main和#sidebar兩大區塊，放在一個CSS表格中（也就是一個橫列中包含著兩行）。

*此表格只有一列，當中有兩行/兩單元格，左單元格放#main的內容，右單元格放#sidebar的內容。
*基本做法：
1) 在.html文件的<body></body>區域，使用<div>標記，來設置main和sidebar的結構，並且設定id。
2) 在.html文件的<head></head>區域，以<style></style>指定CSS表格樣式。

*詳細步驟：
1. 在.html文件的<body></body>區域，為整個表格區域設置一個標記<div id="tableContainer"></div>（設定id是為了方便CSS樣式設置）。
2. 為橫列設置一個<div id="tableRow"></div>。
3. 本範例的橫列中含有兩個單元格（也就是兩直行或兩欄的意思），並設置各自的id（即<div id="main"></div>和<div id="sidebar"></div>）。

<html>
 <head>
     <meta charset="UTF-8">
     <title>網頁標題</title>

 </head>
 <body>
     <div id="tableContainer">
       <div id="tableRow">
         <div id="main"><p>Main單元格的內容在此</p></div>
         <div id="sidebar"><p>Sidebar單元格的內容在此</p></div>
       </div>
     </div>
 </body>
</html>

4. 接下來，在<head></head>區域，以<style></style>指定CSS表格樣式，分別指定CSS表格、橫列和單元格。（本文的後半部會提供另一種標示方式，也就是把CSS樣式指令直接放在HTML標記中。）此處我將main和sidebar兩單元格各自設置了背景顏色，以方便查看網頁呈現效果。

<html>
 <head>
     <meta charset="UTF-8">
     <title>網頁標題</title>
     <style type="text/css">
       div#tableContainer {
                           display: table;
       }
       div#tableRow {
                     display: table-row;
       }
       div#main {
                 display: table-cell;
                 background-color: #dddddd;
       }
       div#sidebar {
                    display: table-cell;
                    background-color: #aaaaaa;
       }
</style>
 </head>
<body>
     <div id="tableContainer">
       <div id="tableRow">
         <div id="main"><p>Main單元格的內容在此</p></div>
         <div id="sidebar"><p>Sidebar單元格的內容在此</p></div>
       </div>
     </div>
 </body>
</html>

修改後，重新加載網頁，看看有什麼變化。是否sidebar的內容出現在右邊，而且左右兩個單元格是一樣大的。

5. 對這個CSS表格，我們可以增加各種樣式設定，使版面更美觀。請自行測試各種設定的效果。
border-spacing是單元格虛擬邊框之間的距離。
vertical-align是垂直對齊方式，此處選擇讓單元格內容向上對齊（top）。
Padding單元格內容與單元格邊緣的距離，又稱為內邊距。

<html>
 <head>
     <meta charset="UTF-8">
     <title>網頁標題</title>
     <style type="text/css">
       div#tableContainer {
                           display: table;
                           border-spacing: 10px;
       }
       div#tableRow {
                     display: table-row;
       }
       div#main {
                 display: table-cell;
                 background-color: #dddddd;
                 vertical-align: top;
                 width: 70%;
                 padding: 20px;
       }
       div#sidebar {
                    display: table-cell;
                    background-color: #aaaaaa;
                    vertical-align: top;
                    padding: 20px;
       }
</style>
 </head>
<body>
     <div id="tableContainer">
       <div id="tableRow">
         <div id="main"><p>Main單元格的內容在此</p></div>
         <div id="sidebar"><p>Sidebar單元格的內容在此</p></div>
       </div>
     </div>
 </body>
</html>

以上只是最基本的設定。請試著調整瀏覽器視窗的寬度，看頁面的呈現是否理想？CSS表格的設置大致成形了！未來要設置兩欄或三欄的頁面佈局，就可以考慮使用CSS表格。


把CSS樣式指令直接放在HTML標記中

如果因為某些緣故無法或不方便直接修改<head></head>區域、無法或不方便修改.css文件，也可以把相關指令直接寫在HTML標記當中。以下將上面範例改為在HTML文件中設定。（id的設定可以省略，此處保留以便和前面的指令對照。）

<div id="tableContainer" style="display: table; border-spacing: 10px;">
   <div id="tableRow" style="display: table-row;">
     <div id="main" style="display: table-cell; background-color: #dddddd; vertical-align: top; width: 70%; padding: 20px;"><p>Main單元格的內容在此</p></div>
     <div id="sidebar" style="display: table-cell; background-color: #aaaaaa; vertical-align: top; padding: 20px;"><p>Sidebar單元格的內容在此</p></div>
   </div>
</div>

效果如下：

Main單元格的內容在此

Sidebar單元格的內容在此

HTML表格的基本設定

製作網頁時，網頁內容總會有需要用上表格的時候，如何使用HTML語言來設置表格呢？本文介紹的是製作HTML表格的基本標記。

表格的用途是能夠簡潔而有條理地呈現資料性內容（例如數據），使讀者可以快速地掌握資料的脈絡。適當地使用表格來呈現資料，可以提高網頁內容的可讀性，增進讀者的理解。

相對於HTML表格是為了有條理的展現數據或文字內容而存在，CSS（層疊樣式表）作為網頁樣式設計的總領導，提供了另一種表格架構（簡稱CSS表格）。CSS表格的主要用途是，以表格的概念來設置網頁頁面的佈局與框架。現下的網頁樣式，常見兩欄（two column）、三欄（three column）的樣式，像這種多個欄框的樣式，就可以透過CSS表格來實現。可以想見，這樣的「表格」主要用途就不是羅列數據資料了。


HTML表格的基本標記方式

首先說明表格的概念。在日常中文的表述裡，我們常常會把行和列的說法混用，這有時會造成溝通上的誤解。本文為了表意清晰，一律使用橫列（row）、直行/欄(column)、單元格(cell)來說明。

HTML表格的特色在於，每一個直行和橫列，以及每一個單元格，都必須標記清楚，才能井然有序地呈現資料。這導致表格的標記乍看之下會很複雜。嗯，只能說，習慣了就好。


演示步驟3-1：
HTML表格的最外層是<table></table>這一對標記。在<table></table>標記內部，須按照由上往下的順序，填寫橫列標記<tr></tr>。此處的tr是table row的意思。表格有幾個橫列，就填入幾對橫列標記（tr）。

表格製作中：填入橫列標記（tr）  
<table border="1">         #屬性border="1"指定了表格框線的粗細度
<tr>
</tr>
<tr>
</tr>
</table>


演示步驟3-2：
在每對<tr></tr>標記內部，須按照由左而右的順序，填寫單元格標記<td></td>。此處的td是table description的意思。一個橫列裡有幾個單元格，就填入幾對單元格標記。換句話說，填入幾個單元格，就代表表格有幾個「直行」。

表格製作中：在橫列標記（tr）內，填入單元格（td）標記。此範例設定每列有三個單元格。
<table border="1">
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>


演示步驟3-3：
在單元格標記<td></td>中間，填入表格資料，也就是表格的主體！

表格製作中：在單元格標記（td）內，填入表格內容
<table border="1">
<tr>
<td>北部</td>
<td>中部</td>
<td>南部</td>
</tr>
<tr>
<td>5</td>
<td>9</td>
<td>11</td>
</tr>
</table>

步驟3-3完成後的表格呈現效果：

北部	中部	南部
5	9	11

HTML表格的標記變化

可以為HTML表格加上表格標題<caption></caption>，以及表格標頭<th></th>，也就是table heading。<th></th>的使用方式其實和<tr></tr>相近，作為標頭它適合用在表格的最上橫列，或是最左直行，效果是可以讓單元格內容加粗顯示。

********表格示例：<caption>和<th>用法
<table border="1">
<caption>此處填入表格的標題</caption>
<tr>
<th>此處為標題1</th>
<th>此處為標題2</th>
<th>此處為標題3</th>
</tr>
<tr>
<td>內容1a</td>
<td>內容2a</td>
<td>內容3a</td>
</tr>
<tr>
<td>內容1b</td>
<td>內容2b</td>
<td>內容3b</td>
</tr>
</table>

表格呈現效果：

此處填入表格的標題

此處為標題1	此處為標題2	此處為標題3
內容1a	內容2a	內容3a
內容1b	內容2b	內容3b

基本規則：
*即便某個單元格的內容是空白的，也要寫出<td></td>標記來代表該單元格。
*<th>和<td>的差別在於，前者是默認為標題的加粗字。
*有時候我們會需要把表格中的單元格合併，例如把兩個單元格合併為一個，設置的方式如下。


********表格示例：單元格跨列合併
此處演示的是，將最左側上下相鄰的兩個單元格合併，使用的是<rowspan="2">的標記。

<table border="1">
<tr>
<td rowspan="2">內容1a</td>
<td>內容2a</td>
<td>內容3a</td>
</tr>
<tr>
                            #因第一行已經合併，此處被合併的單元格略過不寫
<td>內容2b</td>
<td>內容3b</td>
</tr>
</table>

表格呈現效果：

內容1a	內容2a	內容3a
	內容2b	內容3b

********表格示例：單元格跨行合併
此處演示的是，將第二橫列的第一和第二個單元格合併，使用的是<colspan="2">的標記。

<table border="1">
<tr>
<td>內容1a</td>
<td>內容2a</td> 
<td>內容3a</td>
</tr>
<tr>
<td colspan="2">內容1b</td>
                                         #因兩個單元格合併，第二個單元格略過不寫
<td>內容3b</td>
</tr>
</table>

表格呈現效果：

內容1a	內容2a	內容3a
內容1b		內容3b

HTML表格加上CSS樣式設置

由上面的範例可看到，最基本的HTML表格看起來並不是太美觀，如果想要調整它的樣式，必須加上CSS指令。加入CSS指令有兩種方式，一種是在.css文件中，針對表格的樣式進行設置，例如框線border、外邊距margin、內邊距padding、字型font-family、標題位置caption-side等。如果沒有辦法直接修改.css文件，則可以在<table>、<tr>、<td>等HTML表格的標記中，以屬性style=""的方式加上CSS指令。

常用指令：
margin: 表格邊框與網頁邊緣的距離，可以用像素（px）或百分比（%）來標示，也可以設為auto
border: 表格邊框的樣式和顏色
caption-side: 表格標題的位置
border-spacing: 單元格邊框之間的距離
border-collapse: 把單元格邊框之間的距離定為0
padding: 內邊距，也就是單元格文字與單元格框線的距離
text-align: 文字水平對齊方式，可以是left或center或right

********在.css文件中設置表格樣式
table {
      margin-left: 20px;
      margin-right: 20px;
      border: thin solid black; 
      caption-side: bottom;
      border-spacing: 10px 30px 10px 30px;
      border-collapse: collapse;         
 }
caption {
      font-style: italic;
      padding-top: 8px;
      padding-bottom: 8px;
 }
td, th {
      border: think dotted gray;
      padding: 5px;
 }


********在HTML表格標記中加入CSS指令
在HTML表格的標記中加入CSS指令是最直觀的做法。不過它的缺點是，必須逐個表格加入設置，比較瑣碎，而且容易造成不統一的樣式。（如果是在.css文件中設置，就可以控制整個網站網頁中的表格，修改起來也比較簡便快速。）

<table border="1" style="margin-left: auto; margin-right: auto; border: thin solid black; caption-side: top; border-collapse: collapse;">
<caption style="padding: 8px; color: brown; font-style: italic;">此處填入表格的標題</caption>
<tr>
<th style="padding: 5px; width: 150px;">此處為標題1</th>
<th style="padding: 5px;">此處為標題2</th>
<th style="padding: 5px;">此處為標題3</th>
</tr>
<tr style="text-align: center;">
<td style="padding: 5px;">內容1a</td>
<td style="padding: 5px;">內容2a</td>
<td style="padding: 5px;">內容3a</td>
</tr>
<tr>
<td style="padding: 5px;">內容1b</td>
<td style="padding: 5px;">內容2b</td>
<td style="padding: 5px;">內容3b</td>
</tr>
</table>

樣式設置效果：

此處填入表格的標題

此處為標題1	此處為標題2	此處為標題3
內容1a	內容2a	內容3a
內容1b	內容2b	內容3b

效果說明：
*在<table>中設置margin-left: auto; 以及margin-right: auto;，可以讓表格置中。
*在<th>或<td>中設置width: 150px;，可以指定單元格的寬度（每一個直行只要設置第一個的寬度就可以了。）
*在<tr>中設置text-align: center;，就可以把整個橫列的單元格設置為文字居中。

HTML文件中的顏色設定

在HTML文件中設定文字、背景、框線等元素的顏色，是網頁設計人員的基本功。學會設定顏色不是很困難的事，本文簡單說明用三種方式來表示顏色。

在我看來比較有難度的是「選色」和「配色」。漂亮好看的顏色，誰都能挑出幾個，但是挑出的幾個顏色是否能協調而且具備美感地搭配在一起，搭配的比例又是怎樣最恰當？恐怕就不是三言兩語說得清楚了。話說回來，也不用太過擔心，在網路上可以找到各種網頁設計範本作為參考，而且也可以直接觀摩設計出色的網站，從中學習。如果有需要，還可以找幾本配色事典來翻閱，相信總能找到幾個符合自己需求的配色方案。


在HTML網頁文件中設置顏色，有3種常見的格式：

1. 用「顏色名」來設置顏色：

*可用「顏色名」設置的基本顏色有16種，延伸顏色有140種。
*基本16個顏色：aqua, blue, gray, lime, navy, purple, silver, white, black, fuchsia, green, maroon, olive, red, teal, yellow.
使用實例：<div style="color: maroon; background-color: silver;">
*在網路上可以找到所有瀏覽器都支援的有「名字」的顏色列表，例如這個「HTML COLOR NAMES」。https://www.w3schools.com/colors/colors_names.asp


2. 用R,G,B紅綠藍三種顏色的相對比例來設置顏色，可用百分比或0-255的數值來表示。
*例如白色是：100% red + 100% green + 100% blue，在HTMl文件中可以寫成rgb(100%, 100%, 100%)
 例如黑色是：0% red + 0% green + 0% blue，可以寫成rgb(0%, 0%, 0%)
*顏色表示例1（CSS語言）：body { background-color: rgb(80%, 40%, 0%);}
 顏色表示例2（CSS語言）：body { background-color: rgb(204, 102, 0);}
*在配色事典上的顏色，通常都會有RGB顏色的數值，可以用這個方法來標示，使網頁文件能顯示你要的顏色。


3. 用十六進制顏色值（hex code）來設置顏色：這是目前網頁文件最普遍的顏色設置方式。
*例如#FF0000代表的就是red紅色。
*如果是以網頁設計為目的的配色事典，或是提供網頁設計資源的網站，通常就會以hex code來標示顏色。
*萬一你在網站或書本上看到的顏色沒有提供hex code數值，就必須在網路上找轉換工具（converter），將RGB色彩轉換成hex code，或是將hex code轉換成RGB色彩（注1）。
 例如：RGB (100,100,100) 轉換成hex code會是#646464
*用hex code設定HTML文件中的字體顏色：<div style="color: #646464;">



注1：手動計算hex code轉換成RGB色彩

#cd690f若要轉換成RGB顏色，該怎麼表示？

Hex code的六個碼，前2碼代表紅色的成分，中間2碼代表綠色的成分，後2碼代表藍色的成分。
六個碼，每個碼只會出現0~9以及A~F，也就是10個數字和6個字母的可能性，共16個可能性。16x16=256，也就是說，用兩個碼就能夠用來表示單一原色的256個值。這也是它成為十六進制的原因。
0,1,2,3,4,5,6,7,8,9,A(代表10),B(代表11),C(代表12),D(代表13),E(代表14),F(代表15)

#cd690f
c=12, d=13, f=15
cd=12x16+13=205
69=6x16+9=105
0f=0x16+15=15

#cd690f = RGB(205,105,15)

從Hex code轉換成RGB色彩，可以手動計算得到答案，但是反過來，有了RGB色彩的數值，要換算成Hex code好像有點困難？看起來還是讓電腦去計算比較快。