CSS字体

最新推荐文章于 2025-05-15 11:44:42 发布

梁峯

最新推荐文章于 2025-05-15 11:44:42 发布

阅读量120

点赞数

分类专栏： css 笔记文章标签： css3

本文链接：https://blog.youkuaiyun.com/m0_61219786/article/details/124484746

版权

笔记同时被 2 个专栏收录

18 篇文章

订阅专栏

css

9 篇文章

订阅专栏

本文详细介绍了字体的设置，包括颜色、大小、家族，以及如何通过`font-face`引入自定义字体。同时，讲解了图标字体的使用，如`FontAwesome`，通过类选择器、伪元素和实体来展示图标。此外，还讨论了行高的概念及其对文字布局的影响，以及如何通过调整行高实现文本的垂直居中。最后，提到了字体属性的简写方式和加粗、斜体等风格设定。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

字体（font）

文章目录

字体（font）

color：字体颜色、前景色
```
color:#dfc;
```

font-size：字体大小

fontt-size:2em;	/*当前元素的2个font-size*/
fontt-size:3rem;/*根元素的3个font-size*/

font-family：字体样式 [中文要加" "]

可以同时指定多个字体，应用时将依次判断能否使用

font-family:serif;		/*衬线字体*/
font-family:sans-serif;	/*非衬线字体*/
font-family:monospace;	/*等宽字体*/

font-face:可以将服务器中的字体直接提供给用户去使用

<style>
@font-face{
    font-family:'lf';/*命名字体名字*/
    src:url('./font/字体.ttf');/*服务器中字体的路径*/
}
.p{
    font-family:lf;
}
<style/>

可能存在的问题
1. 加载速度可能比较慢
2. 版权（因为是从自己的服务器下载）

图标字体（iconfont）

网页中经常需要使用一些图标，可以通过图片来引入图标

可以将图标直接设置为字体，然后通过font-face的形式来使用图标，

比直接用图片灵活，但只支持单色

直接搜 “图标字体” 或 ’fontawesome‘

通过类设置图标字体

<head>
    <style>
        <link rel="stylesheeet" href="./font/all.css">
    </style>
</head>
<body>
    <i class="fas fa-bell" style="font-size:30px;color:#fbc;"></i>
    <!-- 一个30px的豆沙绿铃铛 -->
    <i class="fab fa-accessible-icon"></i>
    <!--一个轮椅人-->
</body>

通过伪元素设置图标字体

找到要设置的图标元素通过before或after选中
在content种设置字体的编码
设置字体的样式
- fab
  font-family:‘Font Awesome 5 Brands’;
- fas
  font-family:‘Font Awesome 5Free’;
  font-weight:900;

<head>
    <link rel="stylesheet" href="./font/all.css">
    <style>
        li{list-style:none;}
        li::before{
            content:'\f1b0';
            font-family:'Font Awesome 5 Free';
            font-weight:900;
            color:blue;
            marigin-right:10px;
        }
    </style>
</head>
<body>
    <ul>
        <li>莫见长安行乐处</li>
        <li>空令岁月易蹉跎</li>
    </ul>
</body>

通过实体设置图标字体

&#x图标的编码

<body>
        <span class="fas">&#xf0f3;</span>
</body

行高（line height）

指文字占有的实际高度

通过line-height来指定行高（px em）

font-size:50px;
line-height:2;/*若为整数的话，则是font-size指定的倍数，但字体大小不会变*/

字体框

字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度

行高会在字体框的上下平均分配

font-size:50px;
height:200px;
line-height:200px;
/*将行高设置为和高度一样的值，可以使单行文字在一个元素中垂直居中*/

行间距=行高-字体大小

字体属性的简写

font可以设置字体相关的所有属性

font:1px "monospace";
/*字体大小/行高 字体*/

字体加粗

font-weight:bold;

字体风格

font-style:italic;	/*斜体*/