logo.png
模範城市
2022-09-18

如何使用CSS改變網頁字體?

如果你需要用程式碼編輯器對HTMLCSS檔案進行字體修改,可以參考本篇文章的內容說明。

 

  1. 你要改變文字的字體,比如下面這行字。

 

This text is in Arial

 

  1. 前後添加SPAN符號標籤,如下所示。

 

<span> This text is in Arial</span>。

 

  1. 將屬性style=""添加進span標籤。

 

<span style=""> This text is in Arial </span>

 

  1. 在樣式屬性功能表中,以font-family來改變字體。

 

<span style="font-family:Arial"> This text is in Arial </span>

 

  1. 儲存更改程式碼,並查看效果。

 

使用CSS來改變字體的技巧

 

  1. 最好的辦法是在字體清單中始終最少保留兩種字體,這樣如果第一種字體不能使用,它就可以用第二種字體來代替。多個字體之間用逗號隔開,你可以參考下面的例子。

 

font-family:Arial, Geneva, Helvetica, sans-serif;

 

  1. 上述例子是使用了行內樣式,但最好的樣式是使用一個外部樣式表來對不同的元素做出修改,可以透過"class"來達到目的。

 

<div class="arial"><p> This text is in Arial </p></div>

 

這個例子中的HTML設計樣式的CSS檔將這樣顯示:Arial { font-family:Arial; }

 

若字體樣式多於一個,保持在每個CSS後面加一個分號“;”,會是個很好的習慣。