CSS学习之字体--05_font-family:iconfont-优快云博客

本文链接：https://blog.youkuaiyun.com/xym222/article/details/108333173

本文深入解析CSS样式设置，包括字体、背景、渐变等核心特性，介绍如何使用@font-face引入自定义字体，设置行高、背景图片及渐变效果，为网页设计提供丰富样式。

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

字体

font-face可以将服务器中的字体直接提供给用户去使用，问题：
1.加载速度
2.版权
3.字体格式

字体相关的样式，color 用来设置字体颜色，font-size 字体的大小（和font-size相关的单位，em 相当于当前元素的一个font-size，rem 相对于根元素的一个font-size），font-family 字体族（字体的格式）

					serif  衬线字体
                    sans-serif 非衬线字体
                    monospace 等宽字体
                        - 指定字体的类别，浏览器会自动使用该类别下的字体

 @font-face {
             /* 指定字体的名字 */
            font-family:'myfont' ;
            /* 服务器中字体的路径 */
            src: url('./font/ZCOOLKuaiLe-Regular.ttf') format("truetype");
        }
p{
			color: blue;
            font-size: 40px;

            /* font-family: 'Courier New', Courier, monospace; */
            font-family: myfont;
        }

1、图标字体（iconfont）

方式一

在网页中经常需要使用一些图标，可以通过图片来引入图标，但是图片大小本身比较大，并且非常的不灵活。所以在使用图标时，我们还可以将图标直接设置为字体，然后通过font-face的形式来对字体进行引入，这样我们就可以通过使用字体的形式来使用图标。

fontawesome 使用步骤
1.下载 https://fontawesome.com/
2.解压
3.将css和webfonts移动到项目中
4.将all.css引入到网页中
5.使用图标字体
- 直接通过类名来使用图标字体
class=“fas fa-bell”
class=“fab fa-accessible-icon”

<head>
    <link rel="stylesheet" href="./fa/css/all.css">
</head>


<body>
    <i class="fas fa-bell" style="font-size:80px; color:red;"></i>
    <i class="fas fa-bell-slash" ></i>
    <i class="fab fa-accessible-icon" ></i>
    <i class="fas fa-otter" style="font-size: 160px; color:green;"></i>
</body>

在这里插入图片描述

方式二

通过伪元素来设置图标字体

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

li::before{
            content: '\f1b0';
            font-family: 'Font Awesome 5 Free';
            font-weight: 900; 
            color: blue;
            margin-right: 10px;
        }

<body>
    <!-- <i class="fas fa-cat"></i> -->
    <ul>
        <li>锄禾日当午</li>
        <li>汗滴禾下土</li>
        <li>谁知盘中餐</li>
        <li>粒粒皆辛苦</li>
    </ul>
    <span class="fas">&#xf0f3;</span>  
</body>

在这里插入图片描述

2、阿里的字体库

 <link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
        i.iconfont{
            font-size: 100px;
        }

        p::before{
            content: '\e625';
            font-family: 'iconfont';
            font-size: 100px;
        }
</style>

<body>
    <i class="iconfont">&#xe61c;</i>
    <i class="iconfont">&#xe622;</i>
    <i class="iconfont">&#xe623;</i>

    <i class="iconfont icon-qitalaji"></i>

    <p>Hello</p>
</body>

在这里插入图片描述

3、行高

可以将行高设置为和高度一样的值，使单行文字在一个元素中垂直居中。

行高
行高指的是文字占有的实际高度
可以通过line-height来设置行高
行高可以直接指定一个大小（px em）
也可以直接为行高设置一个整数

字体框
字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度。
行高会在字体框的上下平均分配。

div{
            font-size: 50px;
            line-height: 200px;
            border: 1px red solid;
     }


<body>
    <div>今天天气这不错 Hello hello 今天天气这不错 Hello hello 今天天气这不错 Hello hello 今天天气这不错 Hello hello</div>
</body>

4、字体的简写属性

font 可以设置字体相关的所有属性,语法：

font: 字体大小/行高字体族
行高可以省略不写如果不写使用默认值

font-weight 字重字体的加粗
可选值：
normal 默认值不加粗
bold 加粗
100-900 九个级别（没什么用）

font-style 字体的风格
normal 正常的
italic 斜体

div{
            border: 1px red solid;
            font-weight: bold;
            font: bold italic 50px/2  微软雅黑, 'Times New Roman', Times, serif;
     }

<body>
    <div>今天天气真不错 Hello hello</div>
</body>

5、文本的样式

两端对齐和上下对齐

text-align 文本的水平对齐，可选值：

left 左侧对齐
right 右对齐
center 居中对齐
justify 两端对齐

vertical-align 设置元素垂直对齐的方式，可选值：

baseline 默认值基线对齐
top 顶部对齐
bottom 底部对齐
middle 居中对齐

div{
            width: 800px;
            border: 1px red solid;
            text-align: justify;
            font-size: 50px;
        }
 span{
            font-size: 20px;
            border: 1px blue solid;
            vertical-align:baseline; 
         }


<div>
    今天天气 Helloyx<span>真不错 Hello</span>！
</div>

在这里插入图片描述

设置文本修饰

text-decoration 设置文本修饰，可选值：

none 什么都没有
underline 下划线
line-through 删除线
overline 上划线

white-space 设置网页如何处理空白，可选值：

normal 正常
nowrap 不换行
pre 保留空白

 .box1{
            font-size: 50px;
            font-family: 微软雅黑;
            text-decoration: overline;
            }
.box2{
            width: 200px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

<body>

    <div class="box2">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur, minus fugit in perspiciatis reprehenderit consequuntur aspernatur repellat cumque quidem asperiores quaerat placeat, tenetur vel veritatis deserunt numquam. Dolores, cupiditate enim.
    </div>

    <div class="box1">
        今天天气真不错
    </div>
</body>

在这里插入图片描述

6、背景

background-color 设置背景颜色
background-image 设置背景图片

可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色
如果背景的图片小于元素，则背景图片会自动在元素中平铺将元素铺满
如果背景的图片大于元素，将会一个部分背景无法完全显示
如果背景图片和元素一样大，则会直接正常显示

background-repeat 用来设置背景的重复方式
可选值：

repeat 默认值，背景会沿着x轴 y轴双方向重复
repeat-x 沿着x轴方向重复
repeat-y 沿着y轴方向重复
no-repeat 背景图片不重复

background-position 用来设置背景图片的位置

设置方式：
通过 top left right bottom center 表示方位的词来设置背景图片的位置
使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是center
通过偏移量来指定背景图片的位置：水平方向的偏移量垂直方向变量

.box1{
            width: 500px;
            height: 500px;
			background-color: #bfa;
			background-image: url("./img/1.png");
			background-repeat: no-repeat;
			/* background-position: center; */
			background-position: 0px 300px;
			}

<body>
    <div class="box1"></div>
</body>

在这里插入图片描述

background-clip 用来设置背景的范围
可选值：

border-box 默认值，背景会出现在边框的下边
padding-box 背景不会出现在边框，只出现在内容区和内边距
content-box 背景只会出现在内容区

background-origin 背景图片的偏移量计算的原点

padding-box 默认值，background-position从内边距处开始计算
content-box 背景图片的偏移量从内容区处计算
border-box 背景图片的变量从边框处开始计算

background-size 设置背景图片的大小
第一个值表示宽度
第二个值表示高度
如果只写一个，则第二个值默认是 auto
cover 图片的比例不变，将元素铺满
contain 图片比例不变，将图片在元素中完整显示
backgound 背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置,并且该样式没有顺序要求，也没有哪个属性是必须写的

background-size必须写在background-position的后边，并且使用/隔开
background-origin background-clip 两个样式，orgin要在clip的前边

.box3{
            border: 10px red double;
            padding: 50px;
            width: 500px;
            height: 500px;
            background: url('./img/2.jpg') #bfa  center center/contain border-box content-box no-repeat ;
        }


<body>
    <div class="box3">
</body>

在这里插入图片描述

7、渐变

通过渐变可以设置一些复杂的背景颜色，可以实现从一个颜色向其他颜色过渡的效果，注意，渐变是图片，需要通过background-image来设置。

线性渐变，颜色沿着一条直线发生变化：
linear-gradient()

linear-gradient(red,yellow) 红色在开头，黄色在结尾，中间是过渡区域
线性渐变的开头，可以指定一个渐变的方向
to left
to right
to bottom
to top
deg deg表示度数
turn 表示圈

渐变可以同时指定多个颜色，多个颜色默认情况下平均分布，也可以手动指定渐变的分布情况。
repeating-linear-gradient() 可以平铺的线性渐变

.box1{
            width: 200px;
            height: 200px;
            background-image: linear-gradient(red,yellow,#bfa,orange);
            background-image: repeating-linear-gradient(to right ,red, yellow 50px);
          }
          
<body>
    <div class="box1"></div>
</body>

background-image: linear-gradient(red,yellow,#bfa,orange);
在这里插入图片描述
background-image: repeating-linear-gradient(to right ,red, yellow 50px);

8、镜像渐变

radial-gradient() 径向渐变(放射性的效果) ，默认情况下径向渐变的形状根据元素的形状来计算的。

语法：
radial-gradient(大小 at 位置, 颜色位置 ,颜色位置 ,颜色位置)

大小
circle 圆形
ellipse 椭圆
closest-side 近边
closest-corner 近角
farthest-side 远边
farthest-corner 远角
位置：
top right left center bottom

.box1{
            width: 300px;
            height: 300px;
            background-image: radial-gradient(ellipse at 100px 100px, red , #bfa)
        }
        
<body>
    <div class="box1"></div>
</body>

在这里插入图片描述