HTML&CSS基礎-字體的分類
作者:尹正傑
版權聲明:原創作品,謝絕轉載!否則將追究法律責任。
一.HTML源代碼
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>字體的分類</title> <style type="text/css"> p{ font-family: arial,"微軟雅黑","華文彩雲",serif; } </style> </head> <body> <!-- 網頁中的將字體分為5大類,如下所示: serif: 襯線字體 sans-serif: 非襯線字體 monospace: 等寬字體 cursive: 草書字體 fantasy: 幻虛字體 以上這些分類都是一些大的分類,並沒有設計到具體的類型,如果將字體指定為這些格式,瀏覽器會根據自己選擇指定類型的字體。 一般將字體一的大分類,指定為font-family中的最后一個字體 --> <p style="font-size: 50px; font-family: serif;">襯線字體:我是一個P標簽,12345,上上打老虎,ABCGHIabcd</p> <p style="font-size: 50px; font-family: sans-serif;">非襯線字體:我是一個P標簽,12345,上上打老虎,ABCGHIabcd</p> <p style="font-size: 50px; font-family: monospace;">等寬字體:我是一個P標簽,12345,上上打老虎,ABCGHIabcd</p> <p style="font-size: 50px; font-family: cursive;">草書字體:我是一個P標簽,12345,上上打老虎,ABCGHIabcd</p> <p style="font-size: 50px; font-family: fantasy;">幻虛字體:我是一個P標簽,12345,上上打老虎,ABCGHIabcd</p> </body> </html>
二.瀏覽器打開以上代碼渲染結果
1>.火狐瀏覽器打開顯示結果
2>.谷歌瀏覽器打開顯示結果
3>.360瀏覽器打開顯示結果(360不愧是基於谷歌的引擎二次開發的,顯示處理效果幾乎雷同)
4>.IE瀏覽器打開顯示結果