Html+Css小tips:字体

最新推荐文章于 2024-08-24 13:47:49 发布

嘀啦哒

最新推荐文章于 2024-08-24 13:47:49 发布

阅读量143

点赞数

文章标签： css html html5

本文链接：https://blog.csdn.net/weixin_48451943/article/details/120237908

版权

字体

字体族
图标字体
- fontawesome
- iconfont
行高（line height）
字体的简写属性
文本样式

字体族

字体相关样式

color 用于设置字体颜色
font - size 字体大小
单位：
em相当于当前元素的一个font-size
rem 相当于根元素的一个font-size
font-family 字体族（字体格式）
可选值：
serif 衬线字体
sans-serif 非衬线字体
monospace 等宽字体
（指定字体的类别，浏览器会自动使用该类别下的字体）
可以同时指定多个字体，多个字体间使用‘，’进行隔开。字体生效时优先使用第一个，第一个无法使用之后第二个补上，以此类推。

@font-face{
font-family:'myfont';
src:url('./zi.ttf') format("truetype");
}

图标字体

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

fontawesome

fontawesome使用步骤:

进入www.fontawesome.com
下载
将css和webfonts移动到项目中
将all.css引入到网页当中
使用图标字体

直接通过类名来使用图标字体

class="fas fa-bell";
class="fab fa-accessible-icon";

通过伪元素设置使用图标字体

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

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

        }

    </style>
</head>
<body>
    
    <ul>
        <li> haha </li>
    </ul>

直接通过实体来使用图标字体
&#x图标的编码；

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

在这里插入图片描述

iconfont

iconfont使用步骤:

进入www.iconfont.cn
选择想要的图标
添加至我的项目
下载
将内容解压移动到程序文件夹
引入到网页当中
使用图标字体

行高（line height）

行高是指文字占有的实际高度
可以通过line-height来设置行高
行高可以直接指定一个大小（px em）
也可以直接为行高设置一个整数
如果是一个整数的话，行高将会是字体的指定倍数
行高经常还用来设置文字的行间距
行间距 = 行高 - 字体大小
行高会在字体框的上下平均分配

字体的简写属性

font 可以设置字体相关的所有属性
font：加粗斜体字体大小/行高字体族

font: bold italic 50px/2 微软雅黑;

文本样式

text-align 文本水平对齐
left 左侧对齐
right 右侧对其
center 居中对齐
justify 两端对齐

vertical-align 设置元素垂直对齐方式
可选值：
baseline 默认值基线对齐
top 顶部对齐
bottom 底部对齐
middle 居中对齐

text-decoration 设置文本修饰
none 无
underline 下划线
line-through 删除线

white-space 设置网页如何处理空白
normal 正常
nowrap 不换行
pre 保留空白

嘀啦哒

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Html+Css小tips:字体

字体字体族图标字体字体族字体相关样式color 用于设置字体颜色font - size 字体大小单位：em相当于当前元素的一个font-sizerem 相当于根元素的一个font-sizefont-family 字体族（字体格式）可选值：serif 衬线字体sans-serif 非衬线字体monospace 等宽字体（指定字体的类别，浏览器会自动使用该类别下的字体）可以同时指定多个字体，多个字体间使用‘，’进行隔开。字体生效时优先使用第一个，第一个无法使用之后第二个补
复制链接

扫一扫