笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版

字体

1. 字体相关的样式

我们前面讲过字体的两个属性

  • color用来设置字体颜色

  • font-size字体的大小

    • em 相当于当前元素的一个font-size
    • rem 相对于根元素的一个font-size

当然,字体的属性并不止这些

2. font-family

font-family 字体族(字体的格式)

  • serif 衬线字体

  • sans-serif 非衬线字体

  • monospace 等宽字体

  • cursive 手写体

  • fantasy 梦幻字体

上述字体均不表示具体的某种字体,而是字体的分类

我们经常使用的一些字体,如微软雅黑黑体楷体宋体Consolas等,才是具体的某种字体

也就是说,font-family 指定字体的类别,浏览器会自动使用该类别下的字体

font-family可以同时指定多个字体,多个字体间使用隔开

字体生效时优先使用第一个,第一个无法使用则使用第二个,以此类推

font-family: 'Courier New', Courier, monospace

3. 几种字体

我是乱分类的,随便看看就好

手写体

Indie Flower

Ink Free

Nanum Pen

MV Boli

Segoe Print

Shadows Into

艺术体

Barrio

Julius Sans One

Lobster

Monoton

Poiret One

乱码字体

MT Extra

Symbol

Webdings

Wingdings

中文字体

方正粗黑宋简体

微软雅黑

黑体

楷体

宋体

仿宋

4. @font-face

我们除了可以使用系统自带的字体样式外,还可以在服务器端自定义字体位置

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

@font-face {
/* 指定字体名字 */
font-family: 'myFont1';
/* 服务器中字体路径 */
src: url('/font/ZCOOLKuaiLe-Regular.woff'),
url('/font/ZCOOLKuaiLe-Regular.otf'),
url('/font/ZCOOLKuaiLe-Regular.ttf') format('truetype');/* 指定字体格式,一般不写 */
} p {
font-size: 30px;
color: salmon;
font-family: myFont1;
}

问题

  1. 加载速度:受网络速度影响,可能会出现字体闪烁一下变成最终的字体
  2. 版权:有些字体是商用收费的,需要注意
  3. 字体格式:字体格式也有很多种(woff、otf、ttf),未必兼容,可能需要指定多个

5. 图标字体(iconfont)

图标字体简介

在网页中经常需要使用一些图标,可以通过图片来引入图标但是图片大小本身比较大,并且非常的不灵活

所以在使用图标时,我们还可以将图标直接设置为字体,然后通过@font-face的形式来对字体进行引入

这样我们就可以通过使用字体的形式来使用图标

fontawesome

官方网站:https://fontawesome.com/

下载解压完毕之后,直接将css和webfonts移动到项目中即可使用

示例

<link rel="stylesheet" href="/font/fontawesome/css/all.css">
<style>
i {
color: green;
} .fa-venus-mars,
.fa-mars-double {
color: red;
} .fa-html5 {
color: #E34D22;
} .fa-css3 {
color: blue;
} .fa-js {
color: #D1B514;
}
</style> <!-- 大小 -->
<i class="fab fa-weixin fa-lg"></i>
<i class="fab fa-weixin fa-2x"></i>
<i class="fab fa-weixin fa-3x"></i>
<br> <!-- 边框 -->
<i class="fab fa-weixin fa-2x fa-border"></i>
<br> <!-- 旋转 -->
<i class="fab fa-weixin fa-2x fa-rotate-90 "></i>
<!-- 水平对称 -->
<i class="fab fa-weixin fa-2x fa-flip-horizontal "></i>
<!-- 垂直对称 -->
<i class="fab fa-weixin fa-2x fa-flip-vertical "></i>
<br> <!-- 动画 -->
<i class="fa fa-venus-mars fa-3x fa-spin"></i>
<i class="fa fa-mars-double fa-3x fa-pulse"></i>
<br> <!-- 列表 -->
<ul class="fa-ul">
<li><i class="fa-li fa fa-check-square"></i>can be used</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>as bullets</li>
<li><i class="fa-li fa fa-square"></i>in lists</li>
</ul>
<br><br><br> <!-- 组合 -->
<span class="fa-stack fa-lg">
<i class="fab fa-html5 fa-stack-1x fa-10x"></i>
<i class="fab fa-css3 fa-stack-1x fa-4x"></i>
<i class="fab fa-js fa-stack-1x fa-2x"></i>
</span>

效果

其中fas/fab是免费的,其他是收费的

图标字体其他使用方式

通过伪元素设置

  1. 找到要设置图标的元素通过::before::after选中
  2. content中设置字体的编码
  3. 设置字体的样式
    • fabfont-family: 'Font Awesome 5 Brands';
    • fasfont-family: 'Font Awesome 5 Free'; font-weight:900;

示例

<style>
.poem {
width: 200px;
height: 300px;
margin: auto;
} li {
list-style: none;
margin-left: -40px;
} li::before {
content: '\f130';
/* font-family: 'Font Awesome 5 Brands'; */
font-family: 'Font Awesome 5 Free';
font-weight: 900;
margin-right: 10px;
color: gray;
}
</style> <div class="poem">
<h1>武陵春·春晚</h1>
<p> [宋] 李清照</p>
<ul>
<li>风住尘香花已尽,</li>
<li>日晚倦梳头。</li>
<li>物是人非事事休,</li>
<li>欲语泪先流。</li>
<li>闻说双溪春尚好,</li>
<li>也拟泛轻舟。</li>
<li>只恐双溪舴艋舟,</li>
<li>载不动、许多愁。</li>
</ul>
</div>

效果

通过实体设置

通过实体来使用图标字体:&#x图标编码;

示例

<i class="fas"></i>

效果

iconfont

官方网站:https://www.iconfont.cn/

iconfont是阿里的一个图标字体库,海量图标库,图标字体非常丰富

但是版权有点模横两可,如果需要商用,最好联系作者

不过一般情况下,公司企业都会有自己的UI设计团队,会自己去进行设计

这里使用方式大同小异,不过

  • iconfont需要添加购物车后再添加至项目然后下载,下载包中有demo.html,详细介绍了使用方式
  • iconfont也提供了一种在线方式,直接在我的项目中选择在线链接可以复制出一份@font-face的css代码

后续步骤与前面介绍的一致

示例

<!-- <link rel="stylesheet" href="/font/iconfont/iconfont.css"> -->
<style>
i.iconfont {
font-size: 100px;
} p::before {
content: '\e811';
font-family: 'iconfont';
font-size: 50px;
} /* 3、通过在线连接:这里link和@font-face择其一即可 */
@font-face {
font-family: 'iconfont';
/* Project id 2580407 */
src: url('//at.alicdn.com/t/font_2580407_c0kpuhebb7r.woff2?t=1622373966454') format('woff2'),
url('//at.alicdn.com/t/font_2580407_c0kpuhebb7r.woff?t=1622373966454') format('woff'),
url('//at.alicdn.com/t/font_2580407_c0kpuhebb7r.ttf?t=1622373966454') format('truetype');
}
</style> <!-- 1、通过字符实体设置 -->
<i class="iconfont"></i>
<i class="iconfont"></i>
<i class="iconfont"></i>
<i class="iconfont"></i> <!-- 2、通过伪元素设置 -->
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Totam deserunt tempore fugit quos eaque, ipsa rerum
suscipit iure cumque aspernatur esse cupiditate nihil quas nulla odit? Sequi accusantium labore maiores.</p>

效果

【Web前端HTML5&CSS3】12-字体的更多相关文章

  1. 【Web前端HTML5&CSS3】05-样式继承与其他概念

    笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版 目录 样式继承与其他概念 1. 继承 2. 选择器的权重 3. 长度单位 像素 屏幕分辨率 图像分辨率 百分比 em ...

  2. 【Web前端HTML5&CSS3】11-定位

    笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版 目录 定位的简介 1. 相对定位 偏移量(offset) 相对定位的特点 2. 绝对定位 绝对定位的特点 包含块(co ...

  3. 【Web前端HTML5&CSS3】03-字符实体与语义标签

    笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版 目录 字符实体与语义标签 1. 字符实体 2. meta标签 3. 语义标签 4. 块元素与行内元素 块元素(bloc ...

  4. 【Web前端HTML5&CSS3】06-盒模型

    笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版 目录 盒模型 1. 文档流(normalflow) 2. 块元素 3. 行内元素 4. 盒子模型 盒模型.盒子模型.框 ...

  5. 【Web前端HTML5&CSS3】08-盒模型补充

    笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版 目录 盒模型补充及田径场实战 1. 盒子大小 2. 轮廓 3. 阴影 4. 圆角 圆 椭圆 盒模型补充及田径场实战 1 ...

  6. web前端开发:css3实现loading

    web前端开发:css3实现loading 有大量web前端开发工具及学习资料,可以搜群[ web前端学习部落22群 ]进行下载,遇到学习问题也可以问群内专家以及课程老师哟 <!DOCTYPE ...

  7. 1+x 证书 Web 前端开发 CSS3 专项练习

    官方QQ群 1+x 证书 Web 前端开发 CSS3 专项练习 http://blog.zh66.club/index.php/archives/196/

  8. 1+x证书Web前端开发CSS3详细教程

    web 前端开发之 CSS3 新特性 http://blog.zh66.club/index.php/archives/189/ web 前端开发之 html5 新特性 http://blog.zh6 ...

  9. 学习web前端的免费12个学习网站,等你来撩

    我相信很多人刚喜欢web前端或者刚刚接触web前端的时候,都不愿意去花钱去培训或者买资料去学习,因为不知道自己会不会学好,或者只是一时脑热,所以就选择免费的去学习基础.编程学习 很多人包括一些企业家, ...

随机推荐

  1. 《SQL必知必会》学习笔记整理

    简介 本笔记目前已包含 <SQL必知必会>中的所有章节. 我在整理笔记时所考虑的是:在笔记记完后,当我需要查找某个知识点时,不需要到书中去找,只需查看笔记即可找到相关知识点.因此在整理笔记 ...

  2. 基于 Socket 的群聊聊天室(带图形界面,包含注册、登录、数据入库功能)

    代码下载 https://github.com/juno3550/GroupChatRoom 实现框架 Chat 包: server.py:服务器端执行代码(TCP 服务器,根据客户端消息调用 mod ...

  3. 从苏宁电器到卡巴斯基第11篇:我在苏宁电器当营业员 III

    积分换礼的是是非非 在苏宁购物是需要会员卡的(免费办理),我们需要利用这个会员卡来开单,顾客的消费可以换算成积分,贮存在会员卡里面.这个积分可以用于积分换礼,比如电磁炉.乐扣保鲜盒或者其它一些家用器具 ...

  4. 从苏宁电器到卡巴斯基第31篇:难忘的三年硕士时光 IX

    在校的最后一个月 毕业答辩的评审老师宣布我没能通过,让我瞬间不知道该怎么好了.已经到了中午,老师们也都是准备吃盒饭去了,我和其他已经通过了的同学随便收拾了一下教室,然后无助的我赶紧去找旁听的教学秘书, ...

  5. Python脚本模拟登陆DVWA

    目录 requests模拟登陆 Selenium自动化测试登陆 环境:python3.7 windows requests模拟登陆 我们登陆DVWA的时候,看似只有一步:访问网站,输入用户名和密码,登 ...

  6. Metasploit Framework(MSF)的使用

    目录 Metasploit 安装Metasploit 漏洞利用(exploit) 攻击载荷(payload) Meterpreter MS17_010(永恒之蓝) 辅助模块(探测模块) 漏洞利用模块 ...

  7. YII框架的自定义布局(嵌套式布局,版本是1.1.20)

    0x01 创建控制器 0x02 创建文件夹,之后创建视图文件 0x03 浏览器访问cxy/index控制器,验证 以上就是使用默认的布局,非常简单,那么如果我不想用YII框架默认的布局呢,我想用自定义 ...

  8. 数据链路层协议(Ethernet、IEEE802.3、PPP、HDLC)

    目录 数据链路层协议 Ethernet以太网协议 以太网数据帧的封装 IEEE802.3协议 PPP协议 HDLC协议 数据链路层协议 首先Ethernet.IEEE802.3.PPP和HDLC都是数 ...

  9. 1.简单认识PHP和环境搭建

    1.关于PHP PHP(Hypertext Perprocessor,超文本预处理器),是一种服务器端.跨平台.HTML嵌入式的脚本语言,其独特的语法混合了C.Java.和Perl语言的特点,是一种被 ...

  10. Action: Consider the following: If you want an embedded database (H2, HSQL or Derby), please put it on the classpath. If you have database settings to be loaded from a particular profile you may ne

    更多精彩关注微信公众号 错误原因 在pom中引入了mybatis-spring-boot-starter ,Spring boot默认会加载org.springframework.boot.autoc ...