如何更改網頁字體？

一、使用CSS更改字體

CSS是一種描述網頁樣式的語言，我們可以使用CSS來更改字體。下面是一個簡單的示例：

/* 在CSS中，可以使用font-family屬性來指定字體 */
body {
  font-family: Arial, Helvetica, sans-serif;
}

代碼中的font-family屬性可以接受多個參數，用逗號隔開，代表按優先順序順序依次使用這些字體。如果第一個字體在用戶的電腦中不存在，就會嘗試使用下一個字體。

除了font-family屬性，還有font-size用於指定字體大小，font-weight用於指定字體粗細等，你可以根據實際需要自行更改。

二、使用Web字體

如果你需要使用一些非標準字體，比如別緻的手寫體，那麼你可以使用Web字體。Web字體有兩種類型：系統字體和自定義字體。

1、使用系統字體

在CSS中，先指定字體類別，然後在字體庫中選擇相應的字體即可，示例代碼如下：

/* 引用谷歌字體庫中的Open Sans字體 */
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
body {
  font-family: 'Open Sans', sans-serif;
}

示例中，我們首先通過@import引入了谷歌字體庫，在body中指定了使用Open Sans字體。

2、使用自定義字體

如果你有自己的字體文件，比如.ttf或.otf格式的文件，那麼可以使用@font-face將其引入到自己的網站中，示例代碼如下：

/* 引入自己的字體文件 */
@font-face {
  font-family: 'MyFont';
  src: url('myfont.ttf');
}
/* 在CSS中使用自定義字體 */
body {
  font-family: 'MyFont', sans-serif;
}

示例中，我們使用@font-face引入了myfont.ttf字體文件，並將其命名為MyFont。在body中使用了MyFont字體。

三、使用JavaScript更改字體

如果需要根據用戶的操作來實時更改字體，那麼可以使用JavaScript來實現。示例代碼如下：

/* 獲取一個按鈕元素 */
var button = document.getElementById('font-button');
/* 獲取一個包含文本的元素 */
var text = document.getElementById('text');
/* 給按鈕添加點擊事件 */
button.addEventListener('click', function() {
  /* 更改文本元素的字體 */
  text.style.fontFamily = 'Comic Sans MS';
});

示例中，我們獲取了一個按鈕和一個文本元素，並給按鈕添加了點擊事件。每次點擊按鈕時，文本元素的字體就會被更改成Comic Sans MS。

四、總結

通過本文的介紹，我們可以知道，更改網頁字體有多種方法，我們可以通過CSS來更改字體，通過引入Web字體來使用非標準字體，也可以使用JavaScript來實現動態更改。