教大家如何在html中使用特殊字型

程式猿想成程式獅發表於2020-11-10
HTML

前言

html中可以直接使用的字型很多，足以滿足我們大部分需求，但在一些特殊情況下，我們需要使用特殊的字型，本文介紹瞭如何在你的html網頁中使用特殊字型

不多BB，先上效果圖：

在這裡插入圖片描述

接下來就教大家如何使用特殊字型

一、下載字型檔案（.ttf檔案）

百度搜尋你想要的特殊字型的.ttf檔案並把它下載到一個你能記住的目錄中，例如我把華文彩雲.ttf(記得解壓並拿出.ttf檔案)下載進了C盤下的font目錄：

在這裡插入圖片描述


二、在html中引入.ttf字型檔案

下載完.ttf字型檔案後你需要告訴html你的.ttf字型檔案在哪，這樣html才能找到並使用它，你需要做的是在你的html檔案的<head>標籤下的<style>標籤內加入類似這樣的程式碼：

@font-face {
	font-family: 華文彩雲;
	src: url(C:/font/華文彩雲.ttf);
}

說明：以上的font-family值為字型名，src的值為你的.ttf字型檔案的路徑。

三、引入字型檔案後就可以將該字型應用到你的文字上了

將文字加上樣式style="font-family: 字型名;"即可，如：

<div style="font-family: 華文彩雲;">
	只有如此飄逸的字型才配得上如此帥氣的我
</div>

完整程式碼示例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>特殊字型</title>
    <style>
        @font-face {
            font-family: 華文彩雲;
            src: url(C:/font/華文彩雲.ttf);
        }
    </style>
</head>
<body>
    <div style="font-family: 華文彩雲;">
        只有如此飄逸的字型才配得上如此帥氣的我
    </div>
    <div style="font-family: 華文彩雲;">
        只有如此飄逸的字型才配得上如此帥氣的我
    </div>
    <div style="font-family: 華文彩雲;">
        只有如此飄逸的字型才配得上如此帥氣的我
    </div>
</body>
</html>

以上就是今天要講的內容，本文僅僅介紹了字型樣式的簡單使用，如果你想了解關於字型的更多內容，可查閱CSS參考手冊屬性欄下的字型(Font)一欄。

相關文章