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>
這裡給上述的五個段落都給了不一樣的字體樣式,我們現在來看看瀏覽器中顯示的結果:
如圖,最後一個沒有任何的設置,就是設置了前面五個字體,看上去是不是很明顯,這是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 input標籤的屬性有哪些? input標籤的用法總結(附實例)
html中的label標籤怎麼設定高度? label標籤的使用方法介紹
以上是css如何自訂字體? html中的文字字體樣式介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!