javascript修改字體

JavaScript 是前端開發必不可少的一門語言，其功能強大、靈活多變，可以通過其實現豐富多彩的效果和交互，其中包括修改字體的功能。今天我們將對 JavaScript 中修改字體進行詳細的講解。

使用 JavaScript 修改字體，一般通過修改 HTML 中的 style 屬性來實現。下面我們來看一個例子，將一段文字的字號設置為 24px，字體設置為 Arial，加粗。

let elem = document.querySelector('.sample-text');
elem.style.fontSize = '24px';
elem.style.fontFamily = 'Arial';
elem.style.fontWeight = 'bold';

在上面的代碼中，我們首先通過document.querySelector方法獲取到 HTML 中帶有sample-text類的元素，然后分別通過設置fontSize，fontFamily，fontWeight來實現修改字體的功能。

在實際使用 JavaScript 修改字體時，還有一些常用的屬性可以使用，下面我們將對其進行詳細介紹。

1. font-size

字號大小，使用 px 作為單位，一般可以設置為 14px ~ 36px。例如：

elem.style.fontSize = '18px';

字體樣式，可以設置字體的具體名稱或類別，例如 'Arial', 'San-serif', 'Cursive' 等。例如：

elem.style.fontFamily = 'Arial';

字體加粗程度，使用數值來表示，一般可以設置為 400~900，其中 400 表示普通字體，700 表示加粗字體，900 表示超粗字體。例如：

elem.style.fontWeight = 'bold';

字體風格，可以設置為 normal（默認），italic（斜體），oblique（傾斜）。例如：

elem.style.fontStyle = 'italic';

字母間距，可以設置為正整數或負整數，使得每個字母之間的距離變得更小或更大。例如：

elem.style.letterSpacing = '2px';

行高，可以設置為正整數或倍數，使得行與行之間的距離變得更大或更小。例如：

elem.style.lineHeight = '2';

以上是 JavaScript 修改字體的常用屬性，通過設置這些屬性，我們可以實現各種各樣的字體效果。當然，在實際使用時還需要靈活運用，根據不同的場景和需求進行相應的調整。

除此之外，我們還可以通過操作 CSS 類來實現快捷修改字體的功能，例如：

elem.classList.add('new-font');

在 CSS 中定義一個類：

.new-font {
font-size: 24px;
font-family: Arial;
font-weight: bold;
}

通過 add 方法添加new-font類后，就可以快速實現一系列字體的修改。這種方式比直接操作 style 屬性更加靈活，可以方便地添加、刪除、調整字體效果。

至此，我們已經詳細地講述了 JavaScript 修改字體的方法與注意事項，希望本文能夠對大家在前端開發中實現豐富多彩的字體效果有所幫助。