如何通過CSS設置字體樣式與大小-一個前端工程師的指南

CSS是一種樣式表語言，用於設置HTML文檔的樣式和布局。其中一個最常見的應用是設置文本和字體的樣式。在這篇文章中，我們將討論如何通過CSS設置字體樣式與大小。無論是設計網站還是編寫文章，正確的字體樣式和大小都是非常重要的，這篇文章將教你如何使用CSS來設置他們。

一、選擇字體

CSS提供了許多不同的字體供你選擇。字體可以通過font-family屬性來設置。值得一提的是，在設置字體時盡量使用共享的字體族名稱，而不是特定的字體名稱。下面是一個例子:

p{
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

這裡，”Helvetica Neue”是特定字體名稱，它是Mac OS X和iOS中常用的字體。 Helvetica是一個相似的字體，它在大多數情況下也會工作，Arial是針對未經過許可的情況下提供的一種類似字體，sans-serif是作為默認備選字體提供的通用字體族名稱。

你也可以引用網路字體或下載的字體文件：

@font-face{
    font-family: "MyCustomFont";
    src: url("../fonts/MyCustomFont.ttf");
}
p{
    font-family: "MyCustomFont", sans-serif;
}

這個例子中，我們從外部文件夾fonts載入自定義字體文件MyCustomFont.ttf，在設置字體時我們使用了font-family：”MyCustomFont”, sans-serif，這樣會首先使用自定義字體，如果找不到該字體，則會使用默認的sans-serif字體族名稱。

二、選擇字體大小

選擇恰當的字體大小，既不能太大以至於淹沒整頁，也不能太小以至於不可讀。在CSS中，一般使用像素（px），百分比（%）或em來設置字體大小。下面是一個例子：

h1{
    font-size: 36px;
}
p{
    font-size: 16px;
}

這裡，h1的字體大小是36像素，而p的字體大小是16像素。注意，當你指定一個元素的字體大小時，這對於所有它們衍生的子元素來說都是一個起點值。例如：

div{
    font-size: 16px;
}
div h1{
    font-size: 1.5em; /* 這裡的字體大小是24px(16px * 1.5) */
}

在這個例子中，我們使用16像素的字體大小設置了div的字體大小。然後，我們使用1.5em將它的h1的字體大小設置為div字體大小的1.5倍。在這個例子中，h1字體大小為24像素。

三、字重和字體樣式

除了字體和字體大小之外，你還可以通過CSS來設置字重和字體樣式。例如：

h1{
    font-weight: bold; /* 等價於font-weight: 700; */
    font-style: italic;
}

這裡，我們將h1的字體設置為粗體，這是一種特殊的字體重量，等價於數值700，另外我們也將字體樣式設置為斜體。

四、邊框和陰影

對於某些字體和大小而言，邊框和陰影可能會增強字體的可讀性。你可以利用CSS的text-shadow屬性實現這一點：

p{
    text-shadow: 1px 1px #000;
}

在這個例子中，我們在p元素文本下方右下方添加了1像素x軸和y軸方向的陰影，並將陰影顏色設置為黑色。

同樣，我們也可以添加文字邊框，代碼如下：

h1{
    -webkit-text-stroke: 1px black;
    text-stroke: 1px black;
}

在這個例子中，我們使用CSS的text-stroke屬性為h1標題添加了1像素寬的黑色邊框。

五、調整字間距和行高

在某些情況下，你可能需要調整字間距和行高來增強文本的易讀性。例如：

p{
    letter-spacing: 0.5px;
    line-height: 1.5;
}

在這個例子中，我們通過CSS的letter-spacing屬性增加了文字之間的間距，並將行高設置為1.5倍。

當然，還有許多屬性可以用來設置文本和字體樣式。在開始使用它們之前，先嘗試使用這些屬性來定製你的字體，以保持簡單、明了和易於讀取。