HTML&CSS基礎-字體的分類


                        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瀏覽器打開顯示結果

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM