前端学习 -- Css -- 字体分类

简介: 在网页中将字体分成5大类:serif(衬线字体)sans-serif(非衬线字体)monospace (等宽字体)cursive (草书字体)fantasy (虚幻字体) 可以将字体设置为这些大的分类,当设置为大的分类以后,浏览器会自动选择指定的字体并应用样式。

在网页中将字体分成5大类:

  1. serif(衬线字体)
  2. sans-serif(非衬线字体)
  3. monospace (等宽字体)
  4. cursive (草书字体)
  5. fantasy (虚幻字体)

可以将字体设置为这些大的分类,当设置为大的分类以后,浏览器会自动选择指定的字体并应用样式。
一般会将字体的大分类,指定为font-family中的最后一个字体。

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>

    <body>
        <!--
            作者:1213854220@qq.com
            时间:2017-04-12
            描述:衬线字体
        -->
        <p style="font-size: 20px;font-family: serif;">
            日出而作,日入而息。 凿井而饮,耕田而食。 帝力于我何有哉!IHK
        </p>
        <!--
            作者:1213854220@qq.com
            时间:2017-04-12
            描述:非衬线字体
        -->
        <p style="font-size: 20px;font-family: sans-serif;">
            日出而作,日入而息。 凿井而饮,耕田而食。 帝力于我何有哉!IHK
        </p>
        
        <!--
            作者:1213854220@qq.com
            时间:2017-04-12
            描述:草书字体
        -->
        <p style="font-size: 20px;font-family: cursive;">
            日出而作,日入而息。 凿井而饮,耕田而食。 帝力于我何有哉!IHK
        </p>
            <!--
            作者:1213854220@qq.com
            时间:2017-04-12
            描述:虚幻字体
        -->
        <p style="font-size: 20px;font-family: fantasy;">
            日出而作,日入而息。 凿井而饮,耕田而食。 帝力于我何有哉!IHK
        </p>
                <!--
            作者:1213854220@qq.com
            时间:2017-04-12
            描述:等宽字体
        -->
        <p style="font-size: 20px;font-family: monospace;">
            日出而作,日入而息。 凿井而饮,耕田而食。 帝力于我何有哉!IHK
        </p>
    </body>

</html>

效果:

中文区别不打,英文区别很明显

相关文章
|
3月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
59 0
|
2月前
|
前端开发 开发者 C++
独家揭秘:前端大牛们如何高效学习新技术,保持竞争力!
【10月更文挑战第31天】前端技术飞速发展,如何高效学习新技术成为关键。本文通过对比普通开发者与大牛们的策略,揭示了高效学习的秘诀:明确目标、主动探索、系统资源、实践应用和持续学习。通过这些方法,大牛们能更好地掌握新技术,保持竞争力。示例代码展示了如何通过实践加深理解。
52 4
|
2月前
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
35 4
|
3月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
317 1
|
3月前
|
JavaScript 前端开发 Java
VUE学习四:前端模块化,ES6和ES5如何实现模块化
这篇文章介绍了前端模块化的概念,以及如何在ES6和ES5中实现模块化,包括ES6模块化的基本用法、默认导出与混合导出、重命名export和import,以及ES6之前如何通过函数闭包和CommonJS规范实现模块化。
144 0
VUE学习四:前端模块化,ES6和ES5如何实现模块化
|
3月前
|
前端开发 JavaScript 小程序
前端新机遇!为什么我建议学习鸿蒙?
【10月更文挑战第4天】前端新机遇!为什么我建议学习鸿蒙?
139 0
前端新机遇!为什么我建议学习鸿蒙?
|
3月前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
3月前
|
前端开发 UED 容器
前端技术分享:利用 CSS Grid 实现响应式布局
【10月更文挑战第1天】前端技术分享:利用 CSS Grid 实现响应式布局
82 2
|
3月前
|
移动开发 算法 前端开发
前端常用算法全解:特征梳理、复杂度比较、分类解读与示例展示
前端常用算法全解:特征梳理、复杂度比较、分类解读与示例展示
40 0
|
3月前
|
前端开发 JavaScript 容器
前端之CSS基础知识
前端之CSS基础知识
22 0

热门文章

最新文章