Font.md
字體(font)是網頁設計中呈現品牌風格與提高可讀性的重要元素。以下為 CSS 中與文字外觀、排版、樣式控制相關的屬性與觀念整理:
1. font-family
:字體家族
font-family
:字體家族定義文字的字型。可依序指定多個字體,當第一個無法顯示時,會使用備選字體。
font-family: "Helvetica", Arial, sans-serif;
2. font-size
:字體大小
font-size
:字體大小設定文字的大小。常見單位有:
px
:像素,固定大小em
:相對於父元素的字體大小rem
:相對於根元素的字體大小%
:相對於父元素的百分比
font-size: 1.2rem;
3. font-weight
:字體粗細
font-weight
:字體粗細設定文字是否為粗體。
常見值:normal
、bold
、lighter
、bolder
或數值(100
到 900
,以 400
為常態)。
font-weight: 700;
4. font-style
:字體樣式
font-style
:字體樣式設定文字是否為斜體。
normal
(正常)italic
(斜體)oblique
(傾斜)
font-style: italic;
5. line-height
:行距
line-height
:行距控制每行文字的垂直間距,有助於可讀性。
line-height: 1.5;
6. letter-spacing
:字母間距
letter-spacing
:字母間距設定字母之間的水平間距。
letter-spacing: 0.05em;
7. word-spacing
:單字間距
word-spacing
:單字間距設定單字之間的距離。
word-spacing: 4px;
8. text-align
:文字對齊
text-align
:文字對齊設定文字的水平對齊方式。
left
:靠左center
:置中right
:靠右justify
:左右對齊
text-align: justify;
9. color
與 background-color
color
與 background-color
color
:文字顏色background-color
:背景顏色
color: #222;
background-color: #f5f5f5;
10. opacity
:透明度
opacity
:透明度設定整體元素的透明度。
opacity: 0.8;
字體分類與備援
Serif(襯線字體):字母末端有裝飾線條,如 Times New Roman。
Sans-serif(非襯線字體):字母簡潔無襯線,如 Arial、Helvetica。
建議設定多個備援字體,確保不同裝置都能正常顯示。
外部字體載入
Google Fonts 使用方法:
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
font-family: 'Roboto', sans-serif;
@font-face
自定義字型
@font-face
自定義字型可使用本機或遠端字體來源。
@font-face {
font-family: "MyFont";
src: url("myfont.woff2") format("woff2");
}
這些屬性與技術組合起來可打造具備專業外觀、品牌風格與高可讀性的文字設計。
Last updated