css常用font字體屬性是什么

CSS常用Font字體屬性是什么

在網頁設計中，字體（Font）的選擇和樣式設置是至關重要的。CSS（層疊樣式表）提供了豐富的字體屬性，允許開發者精確控制文本的外觀。本文將詳細介紹CSS中常用的字體屬性，包括字體族、字體大小、字體粗細、字體樣式、字體變體、字體顏色、行高、字間距、字母間距、文本裝飾、文本對齊、文本縮進、文本轉換、文本陰影等。通過深入理解這些屬性，您將能夠創建出更具吸引力和可讀性的網頁。

1. 字體族（Font Family）

字體族屬性用于指定文本的字體。CSS允許您指定一個或多個字體族名稱，瀏覽器會按照順序嘗試加載這些字體。如果第一個字體不可用，瀏覽器會嘗試加載第二個字體，依此類推。

1.1 基本語法

font-family: "字體名稱", "備用字體", "通用字體族";

1.2 示例

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

在這個例子中，瀏覽器會首先嘗試加載Arial字體。如果Arial不可用，它會嘗試加載Helvetica。如果Helvetica也不可用，瀏覽器會使用默認的無襯線字體（sans-serif）。

1.3 通用字體族

CSS定義了五種通用字體族，用于在特定字體不可用時提供備用選項：

1. serif：襯線字體，如Times New Roman。
2. sans-serif：無襯線字體，如Arial。
3. monospace：等寬字體，如Courier New。
4. cursive：手寫體，如Comic Sans MS。
5. fantasy：裝飾性字體，如Impact。

1.4 注意事項

• 字體名稱如果包含空格或特殊字符，需要用引號括起來。
• 建議在字體族列表的最后指定一個通用字體族，以確保在所有情況下都有可用的字體。

2. 字體大?。‵ont Size）

字體大小屬性用于設置文本的大小。CSS提供了多種單位來定義字體大小，包括像素（px）、百分比（%）、em、rem、點（pt）等。

2.1 基本語法

font-size: 大小值;

2.2 示例

h1 {
    font-size: 24px;
}

p {
    font-size: 16px;
}

2.3 常用單位

• px：像素，絕對單位，1px等于屏幕上的一個像素點。
• em：相對單位，基于當前元素的字體大小。1em等于當前元素的字體大小。
• rem：相對單位，基于根元素（html）的字體大小。1rem等于根元素的字體大小。
• %：百分比，相對于父元素的字體大小。
• pt：點，常用于打印樣式，1pt等于1/72英寸。

2.4 注意事項

• 使用相對單位（如em、rem）可以使字體大小更具響應性，適應不同設備和屏幕尺寸。
• 避免使用過小的字體大小，以確保文本的可讀性。

3. 字體粗細（Font Weight）

字體粗細屬性用于設置文本的粗細程度。CSS提供了多種值來定義字體粗細，包括數字值和關鍵字。

3.1 基本語法

font-weight: 粗細值;

3.2 示例

h1 {
    font-weight: bold;
}

p {
    font-weight: 400;
}

3.3 常用值

• normal：正常粗細，相當于400。
• bold：加粗，相當于700。
• bolder：比父元素更粗。
• lighter：比父元素更細。
• 100-900：數字值，100最細，900最粗。

3.4 注意事項

• 并非所有字體都支持所有粗細值。如果指定的粗細值不可用，瀏覽器會選擇一個最接近的值。
• 使用數字值可以更精確地控制字體粗細。

4. 字體樣式（Font Style）

字體樣式屬性用于設置文本的樣式，如斜體或正常。

4.1 基本語法

font-style: 樣式值;

4.2 示例

em {
    font-style: italic;
}

strong {
    font-style: normal;
}

4.3 常用值

• normal：正常樣式。
• italic：斜體樣式。
• oblique：傾斜樣式（類似于斜體，但通常用于沒有斜體版本的字體）。

4.4 注意事項

• 并非所有字體都支持斜體樣式。如果指定的樣式不可用，瀏覽器會使用正常樣式。

5. 字體變體（Font Variant）

字體變體屬性用于設置文本的小型大寫字母（small-caps）樣式。

5.1 基本語法

font-variant: 變體值;

5.2 示例

h1 {
    font-variant: small-caps;
}

5.3 常用值

• normal：正常樣式。
• small-caps：小型大寫字母樣式。

5.4 注意事項

• 小型大寫字母樣式會將所有字母轉換為大寫，但小寫字母會顯示為較小的大寫字母。
• 并非所有字體都支持小型大寫字母樣式。

6. 字體顏色（Color）

字體顏色屬性用于設置文本的顏色。CSS提供了多種方式來定義顏色，包括顏色名稱、十六進制值、RGB值、RGBA值、HSL值、HSLA值等。

6.1 基本語法

color: 顏色值;

6.2 示例

h1 {
    color: #ff0000;
}

p {
    color: rgba(0, 0, 255, 0.5);
}

6.3 常用顏色表示方法

• 顏色名稱：如red、blue、green等。
• 十六進制值：如#ff0000（紅色）、#00ff00（綠色）、#0000ff（藍色）。
• RGB值：如rgb(255, 0, 0)（紅色）、rgb(0, 255, 0)（綠色）、rgb(0, 0, 255)（藍色）。
• RGBA值：如rgba(255, 0, 0, 0.5)（半透明紅色）。
• HSL值：如hsl(0, 100%, 50%)（紅色）。
• HSLA值：如hsla(0, 100%, 50%, 0.5)（半透明紅色）。

6.4 注意事項

• 使用RGBA或HSLA值可以設置文本的透明度。
• 確保文本顏色與背景顏色有足夠的對比度，以提高可讀性。

7. 行高（Line Height）

行高屬性用于設置文本行與行之間的垂直間距。行高可以影響文本的可讀性和整體布局。

7.1 基本語法

line-height: 行高值;

7.2 示例

p {
    line-height: 1.5;
}

h1 {
    line-height: 2;
}

7.3 常用值

• normal：默認行高，通常為1.2。
• 數字值：如1.5、2等，表示行高為字體大小的倍數。
• 長度值：如20px、1.5em等，表示具體的行高值。
• 百分比：如150%，表示行高為字體大小的百分比。

7.4 注意事項

• 使用數字值可以使行高更具響應性，適應不同字體大小。
• 適當的行高可以提高文本的可讀性和美觀性。

8. 字間距（Letter Spacing）

字間距屬性用于設置文本中字符之間的間距。字間距可以影響文本的緊湊程度和可讀性。

8.1 基本語法

letter-spacing: 間距值;

8.2 示例

h1 {
    letter-spacing: 2px;
}

p {
    letter-spacing: -1px;
}

8.3 常用值

• normal：默認字間距。
• 長度值：如2px、-1px等，表示具體的字間距值。

8.4 注意事項

• 正值的字間距會增加字符之間的間距，負值的字間距會減少字符之間的間距。
• 適當的字間距可以提高文本的可讀性和美觀性。

9. 字母間距（Word Spacing）

字母間距屬性用于設置文本中單詞之間的間距。字母間距可以影響文本的緊湊程度和可讀性。

9.1 基本語法

word-spacing: 間距值;

9.2 示例

h1 {
    word-spacing: 5px;
}

p {
    word-spacing: -2px;
}

9.3 常用值

• normal：默認字母間距。
• 長度值：如5px、-2px等，表示具體的字母間距值。

9.4 注意事項

• 正值的字母間距會增加單詞之間的間距，負值的字母間距會減少單詞之間的間距。
• 適當的字母間距可以提高文本的可讀性和美觀性。

10. 文本裝飾（Text Decoration）

文本裝飾屬性用于設置文本的裝飾效果，如下劃線、刪除線、上劃線等。

10.1 基本語法

text-decoration: 裝飾值;

10.2 示例

a {
    text-decoration: underline;
}

del {
    text-decoration: line-through;
}

10.3 常用值

• none：無裝飾效果。
• underline：下劃線。
• overline：上劃線。
• line-through：刪除線。
• blink：閃爍效果（不推薦使用）。

10.4 注意事項

• 文本裝飾效果可以組合使用，如text-decoration: underline overline;。
• 閃爍效果（blink）在現代瀏覽器中通常不被支持，且不推薦使用。

11. 文本對齊（Text Align）

文本對齊屬性用于設置文本的水平對齊方式。文本對齊可以影響文本的布局和可讀性。

11.1 基本語法

text-align: 對齊方式;

11.2 示例

h1 {
    text-align: center;
}

p {
    text-align: justify;
}

11.3 常用值

• left：左對齊。
• right：右對齊。
• center：居中對齊。
• justify：兩端對齊。

11.4 注意事項

• 兩端對齊（justify）會使文本在左右兩端對齊，但可能會導致單詞間距不均勻。
• 居中對齊（center）通常用于標題或短文本。

12. 文本縮進（Text Indent）

文本縮進屬性用于設置文本塊中第一行的縮進量。文本縮進可以影響文本的布局和可讀性。

12.1 基本語法

text-indent: 縮進值;

12.2 示例

p {
    text-indent: 2em;
}

12.3 常用值

• 長度值：如2em、20px等，表示具體的縮進值。
• 百分比：如10%，表示縮進值為父元素寬度的百分比。

12.4 注意事項

• 文本縮進通常用于段落的第一行，以創建視覺上的層次感。
• 負值的縮進可以使文本向左縮進，但可能會影響可讀性。

13. 文本轉換（Text Transform）

文本轉換屬性用于設置文本的大小寫轉換效果。文本轉換可以影響文本的外觀和可讀性。

13.1 基本語法

text-transform: 轉換方式;

13.2 示例

h1 {
    text-transform: uppercase;
}

p {
    text-transform: capitalize;
}

13.3 常用值

• none：無轉換效果。
• uppercase：將所有字母轉換為大寫。
• lowercase：將所有字母轉換為小寫。
• capitalize：將每個單詞的首字母轉換為大寫。

13.4 注意事項

• 文本轉換效果不會改變文本的實際內容，只會影響其顯示方式。
• 適當使用文本轉換可以提高文本的可讀性和美觀性。

14. 文本陰影（Text Shadow）

文本陰影屬性用于設置文本的陰影效果。文本陰影可以增強文本的視覺效果和層次感。

14.1 基本語法

text-shadow: 水平偏移 垂直偏移 模糊半徑 顏色;

14.2 示例

h1 {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

14.3 常用值

• 水平偏移：陰影的水平偏移量，正值向右，負值向左。
• 垂直偏移：陰影的垂直偏移量，正值向下，負值向上。
• 模糊半徑：陰影的模糊程度，值越大，陰影越模糊。
• 顏色：陰影的顏色，可以使用任何有效的顏色值。

14.4 注意事項

• 文本陰影可以組合使用，如text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), -2px -2px 4px rgba(255, 255, 255, 0.5);。
• 適當的文本陰影可以增強文本的視覺效果，但過度使用可能會影響可讀性。

15. 字體拉伸（Font Stretch）

字體拉伸屬性用于設置字體的寬度。字體拉伸可以影響文本的外觀和可讀性。

15.1 基本語法

font-stretch: 拉伸值;

15.2 示例

h1 {
    font-stretch: condensed;
}

p {
    font-stretch: expanded;
}

15.3 常用值

• normal：正常寬度。
• ultra-condensed：極度緊縮。
• extra-condensed：非常緊縮。
• condensed：緊縮。
• semi-condensed：半緊縮。
• semi-expanded：半擴展。
• expanded：擴展。
• extra-expanded：非常擴展。
• ultra-expanded：極度擴展。

15.4 注意事項

• 并非所有字體都支持所有拉伸值。如果指定的拉伸值不可用，瀏覽器會選擇一個最接近的值。
• 字體拉伸通常用于特殊設計需求，如標題或標志。

16. 字體合成（Font Synthesis）

字體合成屬性用于控制瀏覽器是否合成粗體或斜體字體。字體合成可以影響文本的外觀和可讀性。

16.1 基本語法

font-synthesis: 合成值;

16.2 示例

h1 {
    font-synthesis: none;
}

p {
    font-synthesis: weight style;
}

16.3 常用值

• none：禁止合成粗體或斜體字體。
• weight：允許合成粗體字體。
• style：允許合成斜體字體。
• weight style：允許合成粗體和斜體字體。

16.4 注意事項

• 字體合成通常用于控制瀏覽器在缺少粗體或斜體字體時的行為。
• 禁止字體合成可以確保文本的外觀與設計一致，但可能會影響可讀性。

17. 字體特征設置（Font Feature Settings）

字體特征設置屬性用于控制OpenType字體的高級特性。字體特征設置可以影響文本的外觀和可讀性。

17.1 基本語法

font-feature-settings: 特征值;

17.2 示例

h1 {
    font-feature-settings: "liga" 1, "dlig" 1;
}

17.3 常用值

• liga：啟用標準連字。
• dlig：啟用離散連字。
• smcp：啟用小型大寫字母。
• c2sc：啟用大寫字母到小型大寫字母的轉換。
• tnum：啟用表格數字。
• onum：啟用舊式數字。

17.4 注意事項

• 字體特征設置通常用于控制OpenType字體的高級特性，如連字、小型大寫字母等。
• 適當的字體特征設置可以提高文本的美觀性和可讀性。

18. 字體變體數字（Font Variant Numeric）

字體變體數字屬性用于控制數字的顯示方式。字體變體數字可以影響文本的外觀和可讀性。

18.1 基本語法

font-variant-numeric: 變體值;

18.2 示例

p {
    font-variant-numeric: oldstyle-nums;
}

18.3 常用值

• normal：正常數字顯示。
• lining-nums：使用襯線數字。
• oldstyle-nums：使用舊式數字。
• proportional-nums：使用比例數字。
• tabular-nums：使用表格數字。
• diagonal-fractions：使用斜線分數。
• stacked-fractions：使用堆疊分數。
• ordinal：使用序數標記。
• slashed-zero：使用斜線零。

18.4 注意事項

• 字體變體數字通常用于控制數字的顯示方式，如舊式數字、比例數字等。
• 適當的字體變體數字可以提高文本的美觀性和可讀性。

19. 字體變體位置（Font Variant Position）

字體變體位置屬性用于控制上下標字符的位置。字體變體位置可以影響文本的外觀和可讀性。

19.1 基本語法

font-variant-position: 變體值;

19.2 示例

sup {
    font-variant-position: super;
}

sub {
    font-variant-position: sub;
}

19.3 常用值