css如何自訂字體？ html中的文字字體樣式介紹-css教學-PHP中文網

首頁

web前端

css教學

css如何自訂字體？ html中的文字字體樣式介紹

寻∝梦

Sep 05, 2018 pm 01:48 PM

css字體字體大小字體粗細

css如何自訂字體的你知道嗎？還有css樣式設定字體樣式的介紹，像是介紹了字體的大小，還有字體的粗細設置，這篇文章教大家如何用css樣式來做這些內容，現在讓我們來看看文章吧

一、首先呢，我們介紹的是如何用css樣式來自訂字體，一起來看看：

在這裡我們介紹一個css樣式中的屬性：

font-family：定義文字的字體系列。也叫字體家族，通用的有五種：serif,sans-serif,monospace,cursive,fantasy.

當然也可以找特定的字體。我們在自己的電腦上找自己電腦上有的字體，然後把名字複製進來也能設置，當然如果用戶端沒有安裝這字體，那這字體就沒用了。顯示的是用戶端的預設的字體了。（想看更多就來PHP中文網css影片教學）

我們來看個文字字體的實例：

<style>
.you_1{font-family:serif}
.you_2{font-family:sans-serif}
.you_3{font-family:monospace}
.you_4{font-family:cursive}
.you_5{font-family:fantasy}
</style>
</head>
<body>
<p class="you_1">这是PHP中文网，里面有很多你要的视频教程，网址是www.php.cn，这里是PHP中文网；</p>
    <p class="you_2">这是PHP中文网，里面有很多你要的视频教程，网址是www.php.cn，这里是PHP中文网；</p>
<p class="you_3">这是PHP中文网，里面有很多你要的视频教程，网址是www.php.cn，这里是PHP中文网；</p>
<p class="you_4">这是PHP中文网，里面有很多你要的视频教程，网址是www.php.cn，这里是PHP中文网；</p>
<p class="you_5">这是PHP中文网，里面有很多你要的视频教程，网址是www.php.cn，这里是PHP中文网；</p>
<p>这是PHP中文网，里面有很多你要的视频教程，网址是www.php.cn，这里是PHP中文网；</p>
</body>

這裡給上述的五個段落都給了不一樣的字體樣式，我們現在來看看瀏覽器中顯示的結果：

css如何自訂字體？ html中的文字字體樣式介紹

如圖，最後一個沒有任何的設置，就是設置了前面五個字體，看上去是不是很明顯，這是font-family中的五種常用字體，基本上所有的電腦都有這些字體，不需要大家擔心在別人的電腦中顯示不出來。我們自訂的字體說完了。

二、現在說說我們的文字字體樣式，例如改變大小啊，字體加粗的介紹。讓我們一起來看：

font-weight:用來設定文字粗細，有三種：normal，bold粗體，參數100~900，定義文字大小的
font-size：屬性用來設定文字的大小的。有px,em,%.預設1em等於16像素點。

這又是css樣式中兩種字體的介紹了，現在我們讓它們在一個實例中出現

來看看關於字體樣式設定的實例吧：

<style>
.you_1{font-weight:600}
.you_2{font-size:40px}
</style>
</head>
<body>
<p class="you_1">这是PHP中文网，里面有很多你要的视频教程，网址是www.php.cn，这里是PHP中文网；</p>
    <p class="you_2">这是PHP中文网，里面有很多你要的视频教程，网址是www.php.cn，这里是PHP中文网；</p>
<p>这是PHP中文网，里面有很多你要的视频教程，网址是www.php.cn，这里是PHP中文网；</p>
</body>

大家很清楚的能看到，這程式碼第一個設定了文字粗細的參數，還有一個設定了文字大小的px參數。現在我們來看看在瀏覽器中顯示的效果是什麼：

css如何自訂字體？ html中的文字字體樣式介紹