​css如何自訂字型?html中的文本字型樣式介紹

來源:互聯網
上載者:User
css如何自訂字型的你知道嗎?還有css樣式設定字型樣式的介紹,比如介紹了字型的大小,還有字型的粗細設定,這篇文章教大家如何用css樣式來做這些內容,現在讓我們來看看文章吧

一、首先呢,我們介紹的是如何用css樣式來自訂字型,一起來看看吧:

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

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

當然還可以找特定的字型。我們在自己的電腦上找自己電腦上有的字型,然後把名字複製進來也能設定,當然如果使用者端沒有安裝這字型,那這字型就沒用了。顯示的是使用者端的預設的字型了。(想看更多就來topic.alibabacloud.com 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">這是topic.alibabacloud.com,裡面有很多你要的視頻教程,網址是www.php.cn,這裡是topic.alibabacloud.com;</p>    <p class="you_2">這是topic.alibabacloud.com,裡面有很多你要的視頻教程,網址是www.php.cn,這裡是topic.alibabacloud.com;</p><p class="you_3">這是topic.alibabacloud.com,裡面有很多你要的視頻教程,網址是www.php.cn,這裡是topic.alibabacloud.com;</p><p class="you_4">這是topic.alibabacloud.com,裡面有很多你要的視頻教程,網址是www.php.cn,這裡是topic.alibabacloud.com;</p><p class="you_5">這是topic.alibabacloud.com,裡面有很多你要的視頻教程,網址是www.php.cn,這裡是topic.alibabacloud.com;</p><p>這是topic.alibabacloud.com,裡面有很多你要的視頻教程,網址是www.php.cn,這裡是topic.alibabacloud.com;</p></body>

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

,最後一個沒有任何的設定,就是設定了前面五個字型,看上去是不是很明顯,這是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">這是topic.alibabacloud.com,裡面有很多你要的視頻教程,網址是www.php.cn,這裡是topic.alibabacloud.com;</p>    <p class="you_2">這是topic.alibabacloud.com,裡面有很多你要的視頻教程,網址是www.php.cn,這裡是topic.alibabacloud.com;</p><p>這是topic.alibabacloud.com,裡面有很多你要的視頻教程,網址是www.php.cn,這裡是topic.alibabacloud.com;</p></body>

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

這個有點設定大了。不過沒關係,這就肯定能看清楚的。不會有人說看不清楚,一個是設定粗細的,一個是設定大小的,應該不會有人分不清哪個是設定大小和哪個是設定粗細的吧。

好了,這篇文章到這就結束了,介紹了css樣式如何設定字型,還有文本字型樣式的設計。有問題的可以在下方留言提問。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.