css 字体族 详细讲解

举报
可期 发表于 2021/12/17 19:08:02 2021/12/17
【摘要】 慢慢是一个很好的词 慢慢遇见 慢慢成长 慢慢喜欢 慢慢温柔 所以我们要一起慢慢来 慢慢看世界 慢慢变老 字体族说到字体族就要为大家讲讲 图标字体 和 文本的水平垂直对齐方式 一.图标字体 首先来讲解图标字体:1.本质是字体,但是我们可以改变其属性。2.就是将图片打包成字体导入网页,这样可以减少网页请求。3.具有矢量性,即使放大也可以清晰观看。4.是移动端设备必须的。 了解了字体图标,下面来讲...

慢慢是一个很好的词 慢慢遇见 慢慢成长 慢慢喜欢 慢慢温柔 所以我们要一起慢慢来 慢慢看世界 慢慢变老

字体族

说到字体族就要为大家讲讲 图标字体文本的水平垂直对齐方式

一.图标字体

首先来讲解图标字体:
1.本质是字体,但是我们可以改变其属性。
2.就是将图片打包成字体导入网页,这样可以减少网页请求。
3.具有矢量性,即使放大也可以清晰观看。
4.是移动端设备必须的。
了解了字体图标,下面来讲讲字体图标的使用方法:

1.在使用图标时可以将图标直接设置为字体然后通过 font-face 的形式对字体进行引入
2.然后图标字体的使用我们推荐 fontawesome

使用步骤1:

		1.下载 fontaswesome.com
        2.解压
        3.将css 和 wefonts 移动到项目中,放在同一目录下
        4.将all.css 引入到网页中
        5.使用图标字体
            -直接通过类名来使用图标字体
                class="fas 图标名称"
                class="fad 图标名称"

如下实例:
<i class="fas fa-snowboarding" style="color: aqua; font-size: 50px;"></i>
在使用时一定记得先导入项目文件,然后可以通过名字导入想要的字体,既然上面说了图标字体就是图片,那么我们就可以对图标字体进行设置大小,颜色,透明度,等等

使用步骤2:

当然我们还可以通过css代码来设置图标字体,但是这种方法比较麻烦但是更灵活。如下:

p::before{
            content: '\f082';
            font-family: 'Font Awesome 5 Brands';
        }

我们可以直接在content中输入图标的编码。当然font-family中的值也是指定的可以在下载的图标字体中找到。

二.文本的水平垂直对齐方式

下面来讲解文本的水平垂直对齐方式。
水平对齐:

 使用text-align 设置文本的水平对齐
               可选值:
                    left 向左
                    right 向右
                    center 居中
                    justify 两端对齐  

垂直对齐:

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

附加内容:

1.设置文本修饰:

text-decoration 设置文本修饰
            可选值:
                none 无 可去除下划线
                overline 上划线
                underline 下划线
                line-htrough 删除线 

2.设置文本如何处理空白:

white-space 设置文本如何处理空白
            normal 正常
            mowrap 不换行
            pre 保留空白  
【版权声明】本文为华为云社区用户原创内容,未经允许不得转载,如需转载请自行联系原作者进行授权。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@huaweicloud.com
  • 点赞
  • 收藏
  • 关注作者

评论(0

0/1000
抱歉,系统识别当前为高风险访问,暂不支持该操作

全部回复

上滑加载中

设置昵称

在此一键设置昵称,即可参与社区互动!

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。

*长度不超过10个汉字或20个英文字符,设置后3个月内不可修改。