CSS Font CSS

一、字體樣式

在CSS中，字體對於一個網頁的視覺效果至關重要，可以讓網頁更具辨識度和美感。字體樣式可以通過設置不同的屬性來實現，包括字體大小、字體顏色、字體家族等。

一個常見的字體樣式設置如下，其中設置了字體大小為14像素，字體顏色為黑色，字體家族為微軟雅黑：

body {
  font-size: 14px;
  color: #000;
  font-family: "Microsoft YaHei",sans-serif;
}

除了以上屬性外，還有其他如字體加粗、字體樣式等屬性，可根據需求設置。

二、字體排版

在實際應用中，常常需要對網頁中的字體進行排版，比如調整字間距、行間距、對其方式等。可以通過設置相關的屬性來實現。

一個常見的字體排版設置如下，其中設置了字體行高為1.5倍行高，字母之間的間隔為0.1個字符寬度：

p {
  line-height: 1.5;
  letter-spacing: 0.1em;
  text-align: justify;
}

另外，還可以設置各個段落的首行縮進、文本溢出處理等屬性。

三、Web字體

在Web開發中，經常遇到需要使用特定字體的情況，如公司LOGO等。而有些字體可能不是所有用戶都有安裝，這時候就需要用到Web字體。

Web字體其實也是一種特定格式的字體文件，只不過是經過了一些處理後可被網頁直接加載。通過在CSS中設置@font-face規則，可以引入你需要的字體文件：

@font-face {
  font-family: "MyWebFont";
  src: url("webfont.eot"); /*支持IE*/
  src: url("webfont.eot?#iefix") format("embedded-opentype"), /*IE自己獨有的寫法*/
       url("webfont.woff") format("woff"), /*主流字體格式*/
       url("webfont.ttf") format("truetype"), /*主流字體格式*/
       url("webfont.svg#svgFontName") format("svg"); /*兼容性寫法*/
}

這樣就可以在CSS中直接使用MyWebFont字體，而不用擔心用戶是否安裝了對應字體。

四、響應式字體

在不同設備上，字體的大小適應性也要有所區別，這就是響應式字體。

通常情況下，我們希望在大屏幕設備上顯示大一些的字體，而在小屏幕設備上顯示相應縮小的字體。可以通過媒體查詢來實現：

@media screen and (max-width: 768px) {
  body {
    font-size: 12px;
  }
}

@media screen and (min-width: 769px) {
  body {
    font-size: 16px;
  }
}

上述代碼中，將屏幕寬度小於768px的設備字體大小設置為12px，而將屏幕寬度大於等於769px的設備字體大小設置為16px。

五、其他

除了以上常用的CSS字體相關屬性，還有其他一些與字體相關的屬性，可以根據具體需求設置，如text-shadow等。

綜上所述，CSS字體在Web開發中有着非常重要的作用，通過設置相關屬性，能夠讓頁面達到更好的視覺效果，並且能夠支持各種特殊需求，如排版、Web字體、響應式字體等。