【CSS】CSS字体样式【CSS基础知识详解】

最新推荐文章于 2024-08-14 10:42:14 发布

「已注销」

最新推荐文章于 2024-08-14 10:42:14 发布

阅读量1w

点赞数 31

分类专栏： # CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/huawuque404/article/details/127638391

版权

CSS基础知识详解

👨‍💻个人主页：@花无缺
欢迎点赞👍 收藏⭐ 留言📝 加关注✅!
本文由 花无缺 原创

本文章收录于专栏【CSS】

【CSS专栏】已发布文章

📁【CSS基础认知】
📁【CSS选择器全解指南】

本文目录【CSS字体样式】

🌙CSS字体认知
🌙字型
- 🌸Serif 和 Sans-serif 字体
- 🌸font-family属性
🌙字体样式
🌙字体大小
🌙字体粗细
🌙小型大写字母字体
🌙字体复合属性

🌙CSS字体认知

文字是网页界面上最常见的元素，而文字的字体、大小和文字样式等都可以通过CSS来设置。

🌙字型

在 CSS 中，有五个通用字型：

衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感

特点：文字笔画粗细不均匀，并且首尾有笔锋装饰

场景：报刊书籍中应用广泛

常见该系列字体：宋体、Times New Roman
无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。

特点：文字笔画粗细均匀，并且首尾无修饰

场景：网页中大多采用无衬线字体

常见该系列字体：黑体、Arial
等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。

特点：每个字母或文字的宽度相等

场景：一般用于程序代码编写，有利于代码的阅读和编写

常见该系列字体：Consolas、fira code
草书字体（Cursive）- 模仿了人类的笔迹。
幻想字体（Fantasy）- 是装饰性/俏皮的字体。

所有不同的字体名称都属于这五个通用字体系列之一。

🌸Serif 和 Sans-serif 字体

Serif vs. Sans-serif

在计算机屏幕上，sans-serif字体被认为比serif字体容易阅读

一些字体的例子：

通用字型	字体名称实例
Serif	Times New Roman Georgia Garamond
Sans-serif	Arial Verdana Helvetica
Monospace	Courier New Lucida Console Monaco
Cursive	Brush Script MT Lucida Handwriting
Fantasy	Copperplate Papyrus

🌸font-family属性

在CSS中，我们使用font-family属性规定文本的字体。

通常 font-family 属性应该设置多个值，以保证当浏览器不支持第一种字体时使用其他的备选字体。

注意: 如果字体系列的名称超过一个字，它必须用引号，如 font family：“宋体”。

多个字体系列用一个逗号分隔指明。

例如：

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <title>花无缺</title>
    <style>
        /*设置段落p的字体为楷体,如果浏览器不支持则采用宋体,依次类推*/
        p {
     
            font-family: "楷体", "宋体",serif;
        }
        /*设置div的字体为隶书,如果不支持隶书,则采用浏览器默认字体*/
        div {
     
            font-family: "隶书";
        }
    </style>
</head>

<body>
    <p>
        通常font-family属性应该设置多个值，以保证当浏览器不支持第一种字体时使用其他的备选字体。
    </p>

    <div>
        如果字体系列的名称超过一个字，它必须用引号，如font family："宋体"。

        多个字体系列是用一个逗号分隔指明。
    </div>
</body>