html字体有哪些

1013 阅读 0 评论 669 点赞

我是靠谱客的博主烂漫煎蛋，最近开发中收集的这篇文章主要介绍html字体有哪些，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

在HTML网页设计中，字体样式的设置是最为基础的。网页中设置合适的字体，可以提高用户体验。那么字体的设置主要用到css中font-family和font-style等字体相关属性。

下面给大家介绍几种常见的HTML字体样式！

代码示例：

<!DOCTYPE>
<html>
<meta charset="utf-8">
<head>
    <title></title>
    <style type="text/css">
        h2 { color: green; }

        #p1 { font-family: Times, "Times New Roman", serif; }
        #p2 { font-family: Helvetica, Arial, sans-serif; }
        #p3 { font-family: serif; }
        #p4 { font-family: sans-serif; }
        #p5 { font-family: monospace; }
        #p6 { font-family: cursive; }
        #p7 { font-family: fantasy; }

        .s1 { font-style: italic; }
        .s2 { font-style: oblique; }
        .s3 { font-weight: bold; }
        .s4 { font-weight: 100; }
        .s5 { font-style: normal;}
    </style>

</head>
<body>
<h1>字体系列</h1>
<p>与CSS一起使用。两个常见的字体组合列表和五个通用后备字体系列。</p>
一个serif字体家族列表！
<h2>font-family: Times, "Times New Roman", serif</h2>
<p id="p1">
    <span class="s1">斜体字体！</span>
    <span class="s2">字体样式为font-style: oblique; </span>
    <span class="s3">字体样式为font-weight: bold;</span>
    <span class="s4">字体样式为font-weight: 100;</span>
    <span class="s5">正常字体样式！</span>
</p>
一个sans-serif字体家族列表！
<h2>font-family: Helvetica, Arial, sans-serif</h2>
<p id="p2">
    <span class="s1">斜体字体！</span>
    <span class="s2">字体样式为font-style: oblique; </span>
    <span class="s3">字体样式为font-weight: bold;</span>
    <span class="s4">字体样式为font-weight: 100;</span>
    <span class="s5">正常字体样式！</span>
</p>
serif通用字体系列！
<h2>font-family: serif</h2>
<p id="p3">
    <span class="s1">斜体字体！</span>
    <span class="s2">字体样式为font-style: oblique; </span>
    <span class="s3">字体样式为font-weight: bold;</span>
    <span class="s4">字体样式为font-weight: 100;</span>
    <span class="s5">正常字体样式！</span>
</p>
sans-serif通用字体系列！
<h2>font-family: sans-serif</h2>
<p id="p4">
    <span class="s1">斜体字体！</span>
    <span class="s2">字体样式为font-style: oblique; </span>
    <span class="s3">字体样式为font-weight: bold;</span>
    <span class="s4">字体样式为font-weight: 100;</span>
    <span class="s5">正常字体样式！</span>
</p>
等宽通用字体系列！
<h2>font-family: monospace</h2>
<p id="p5">
    <span class="s1">斜体字体!</span>
    <span class="s2">字体样式为font-style: oblique; </span>
    <span class="s3">字体样式为font-weight: bold;</span>
    <span class="s4">字体样式为font-weight: 100;</span>
    <span class="s5">正常字体样式！</span>
</p>
草书字体家族！
<h2>font-family: cursive</h2>
<p id="p6">
    <span class="s1">斜体字体！</span>
    <span class="s2">字体样式为font-style: oblique; </span>
    <span class="s3">字体样式为font-weight: bold;</span>
    <span class="s4">字体样式为font-weight: 100;</span>
    <span class="s5">正常字体样式！</span>
</p>
幻想通用字体系列！
<h2>font-family: fantasy</h2>
<p id="p7">
    <span class="s1">斜体字体！</span>
    <span class="s2">字体样式为font-style: oblique; </span>
    <span class="s3">字体样式为font-weight: bold;</span>
    <span class="s4">字体样式为It sucks in with a 100 font-weight!</span>
    <span class="s5">正常字体样式！</span>
</p>

</body>
</html>
登录后复制

前台效果如下图：