【Web前端HTML5&CSS3】12-字体

抖音助理号李丽 發表於 2021-5-30 19:48:00

<blockquote>
笔记来源：尚硅谷 Web 前端 HTML5&CSS3 初学者零基础入门全套完整版
</blockquote>
<div class="toc"><div class="toc-container-header">目录</div><ul><li>字体<ul><li>1. 字体相关的样式</li><li>2. font-family</li><li>3. 几种字体<ul><li>手写体</li><li>艺术体</li><li>乱码字体</li><li>中文字体</li></ul></li><li>4. @font-face</li><li>5. 图标字体（iconfont）<ul><li>图标字体简介</li><li>fontawesome</li><li>图标字体其他使用方式<ul><li>通过伪元素设置</li><li>通过实体设置</li></ul></li><li>iconfont</li></ul></li><li>6. 行高<ul><li>行高<code>line height</code></li><li>字体框</li><li>字体的简写属性</li></ul></li><li>7. 文本对齐方式<ul><li>水平对齐</li><li>垂直对齐</li></ul></li></ul></li></ul></div>
<h1 id="字体">字体</h1>
<h2 id="1-字体相关的样式">1. 字体相关的样式</h2>
我们前面讲过字体的两个属性
<ul>
<li>
<code>color</code>用来设置字体颜色
</li>
<li>
<code>font-size</code>字体的大小
<ul>
<li><code>em</code> 相当于当前元素的一个<code>font-size</code></li>
<li><code>rem</code> 相对于根元素的一个<code>font-size </code></li>
</ul>
</li>
</ul>
当然，字体的属性并不止这些
<h2 id="2-font-family">2. font-family</h2>
<code>font-family</code> 字体族（字体的格式）
<ul>
<li>
<code>serif</code> 衬线字体
<img src="https://img-blog.csdnimg.cn/img_convert/271aca414249674af7a4237c1078f238.png" alt="image-20210530142246598" loading="lazy">
</li>
<li>
<code>sans-serif</code> 非衬线字体
<img src="https://gitee.com/vectorx/ImageCloud/raw/master/html5/20210530142157.png">
</li>
<li>
<code>monospace</code> 等宽字体
<img src="https://img-blog.csdnimg.cn/img_convert/e79757b84ca03011020ee0262a089eed.png" alt="image-20210530142305540" loading="lazy">
</li>
<li>
<code>cursive</code> 手写体
<img src="https://img-blog.csdnimg.cn/img_convert/c648248e57ff7905322fedce39b95fdd.png" alt="image-20210530143056539" loading="lazy">
</li>
<li>
<code>fantasy</code> 梦幻字体
<img src="https://img-blog.csdnimg.cn/img_convert/ee7293393da366809a825558ac0fb2d3.png" alt="image-20210530142030295" loading="lazy">
</li>
</ul>
上述字体均不表示具体的某种字体，而是字体的分类
我们经常使用的一些字体，如<code>微软雅黑</code>、<code>黑体</code>、<code>楷体</code>、<code>宋体</code>、<code>Consolas</code>等，才是具体的某种字体
也就是说，<code>font-family</code> 指定字体的类别，浏览器会自动使用该类别下的字体 
<code>font-family</code>可以同时指定多个字体，多个字体间使用<code>，</code>隔开
字体生效时优先使用第一个，第一个无法使用则使用第二个，以此类推
<pre><code class="language-css">font-family: "Courier New", Courier, monospace;
</code></pre>
<img src="https://img-blog.csdnimg.cn/img_convert/c4c0da896c1a8707431538f44756ed55.png" alt="image-20210530144745242" loading="lazy">
<h2 id="3-几种字体">3. 几种字体</h2>
我是乱分类的，随便看看就好
<h3 id="手写体">手写体</h3>
Indie Flower
<img src="https://img-blog.csdnimg.cn/img_convert/5e61429db239e98963586c869c27aead.png" alt="image-20210530150501201" loading="lazy">
Ink Free
<img src="https://img-blog.csdnimg.cn/img_convert/01ef23c34bee2c9e4cbe1f043dd3b6da.png" alt="image-20210530150547525" loading="lazy">
Nanum Pen
<img src="https://img-blog.csdnimg.cn/img_convert/1f564db206d5a9e14aa60b3ee24091d0.png" alt="image-20210530151638440" loading="lazy">
MV Boli
<img src="https://img-blog.csdnimg.cn/img_convert/4bb92b873db63ecca98511778c0b17d7.png" alt="image-20210530151419977" loading="lazy">
Segoe Print
<img src="https://img-blog.csdnimg.cn/img_convert/b2ee8359722a57602592764f02e8d1cb.png" alt="image-20210530151937732" loading="lazy">
Shadows Into
<img src="https://img-blog.csdnimg.cn/img_convert/ea4759bf9241a3c272f60185d83a64d7.png" alt="image-20210530152032865" loading="lazy">
<h3 id="艺术体">艺术体</h3>
Barrio
<img src="https://img-blog.csdnimg.cn/img_convert/529e00359270f5ed6c76ab7aefab510d.png" alt="image-20210530144925484" loading="lazy">
Julius Sans One
<img src="https://img-blog.csdnimg.cn/img_convert/08bc039ec67f480b350f611b03e73b4d.png" alt="image-20210530150656102" loading="lazy">
Lobster
<img src="https://img-blog.csdnimg.cn/img_convert/fe49ec07bc69acc0821ad786a4bde82d.png" alt="image-20210530150750662" loading="lazy">
Monoton
<img src="https://img-blog.csdnimg.cn/img_convert/0e23afa75c7a2435a4ef811e666f9ce3.png" alt="image-20210530151219084" loading="lazy">
Poiret One
<img src="https://img-blog.csdnimg.cn/img_convert/134a20c01b52b7bf3e956e3797f2cd7b.png" alt="image-20210530151802098" loading="lazy">
<h3 id="乱码字体">乱码字体</h3>
MT Extra
<img src="https://img-blog.csdnimg.cn/img_convert/2fc9c72c2fe29ec6b128cf4f658804ad.png" alt="image-20210530151339624" loading="lazy">
Symbol
<img src="https://img-blog.csdnimg.cn/img_convert/4f1970f3d6c33a4d3aa954a454b0f4b9.png" alt="image-20210530152221092" loading="lazy">
Webdings
<img src="https://img-blog.csdnimg.cn/img_convert/baa93c39706e92685e08bc86e5eeae79.png" alt="image-20210530152413018" loading="lazy">
Wingdings
<img src="https://img-blog.csdnimg.cn/img_convert/be8c184600f286f23c67bca3ca173cd4.png" alt="image-20210530152450136" loading="lazy">
<h3 id="中文字体">中文字体</h3>
方正粗黑宋简体
<img src="https://img-blog.csdnimg.cn/img_convert/97d9fc2e7c6ef6e292ef60c1bce24992.png" alt="image-20210530153059327" loading="lazy">
微软雅黑
<img src="https://img-blog.csdnimg.cn/img_convert/9c2cdbaf3d24848c92930a656497fa2c.png" alt="image-20210530153435455" loading="lazy">
黑体
<img src="https://img-blog.csdnimg.cn/img_convert/cb88ce51af854d0495ad383713fd42bf.png" alt="image-20210530153142702" loading="lazy">
楷体
<img src="https://img-blog.csdnimg.cn/img_convert/82bca9d833d14e4d61338e2f3109fd7d.png" alt="image-20210530153207163" loading="lazy">
宋体
<img src="https://img-blog.csdnimg.cn/img_convert/cf7281c1fe37b4a32d2702e85a1047d1.png" alt="image-20210530153247029" loading="lazy">
仿宋
<img src="https://img-blog.csdnimg.cn/img_convert/b97ebc4ded090976518db193123a04f3.png" alt="image-20210530153119913" loading="lazy">
<h2 id="4-font-face">4. @font-face</h2>
我们除了可以使用系统自带的字体样式外，还可以在服务器端自定义字体位置
<code>@font-face</code>可以将服务器中的字体直接提供给用户去使用
<pre><code class="language-css">@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;
}
</code></pre>
<img src="https://img-blog.csdnimg.cn/img_convert/ce2b3bdcf85cd81a873aa7b7ee15b2a9.png" alt="image-20210530164007022" loading="lazy">
问题
<ol>
<li>加载速度：受网络速度影响，可能会出现字体闪烁一下变成最终的字体</li>
<li>版权：有些字体是商用收费的，需要注意</li>
<li>字体格式：字体格式也有很多种（woff、otf、ttf），未必兼容，可能需要指定多个</li>
</ol>
<h2 id="5-图标字体iconfont">5. 图标字体（iconfont）</h2>
<h3 id="图标字体简介">图标字体简介</h3>
在网页中经常需要使用一些图标，可以通过图片来引入图标但是图片大小本身比较大，并且非常的不灵活
所以在使用图标时，我们还可以将图标直接设置为字体，然后通过<code>@font-face</code>的形式来对字体进行引入
这样我们就可以通过使用字体的形式来使用图标
<h3 id="fontawesome">fontawesome</h3>
官方网站：https://fontawesome.com/
下载解压完毕之后，直接将 css 和 webfonts 移动到项目中即可使用
示例
<pre><code class="language-html"><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>





 



 







 




 


<ul class="fa-ul">
<li>can be used</li>
<li>as bullets</li>
<li>in lists</li>
</ul>
 







</code></pre>
效果
<img src="https://img-blog.csdnimg.cn/img_convert/5d28ccfc2ddde16cfc7a5d71b4ab3e52.gif" alt="动画" loading="lazy">
其中<code>fas</code>/<code>fab</code>是免费的，其他是收费的
<h3 id="图标字体其他使用方式">图标字体其他使用方式</h3>
<h4 id="通过伪元素设置">通过伪元素设置</h4>
<ol>
<li>找到要设置图标的元素通过<code>::before</code>或<code>::after</code>选中</li>
<li>在<code>content</code>中设置字体的编码</li>
<li>设置字体的样式
<ul>
<li><code>fab</code>：<code>font-family: 'Font Awesome 5 Brands';</code></li>
<li><code>fas</code>：<code>font-family: 'Font Awesome 5 Free'; font-weight：900;</code></li>
</ul>
</li>
</ol>
示例
<pre><code class="language-html"><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>
[宋] 李清照
<ul>
<li>风住尘香花已尽，</li>
<li>日晚倦梳头。</li>
<li>物是人非事事休，</li>
<li>欲语泪先流。</li>
<li>闻说双溪春尚好，</li>
<li>也拟泛轻舟。</li>
<li>只恐双溪舴艋舟，</li>
<li>载不动、许多愁。</li>
</ul>
</div>
</code></pre>
效果
<img src="https://img-blog.csdnimg.cn/img_convert/af91c5ce8fe044b87932183782763606.png" alt="image-20210530185058977" loading="lazy">
<h4 id="通过实体设置">通过实体设置</h4>
通过实体来使用图标字体：<code>&#x图标编码;</code>
示例
<pre><code class="language-html">&#xf025;
</code></pre>
效果
<img src="https://img-blog.csdnimg.cn/img_convert/0d46a541e18cad08195ec08765d01614.png" alt="image-20210530185606771" loading="lazy">
<h3 id="iconfont">iconfont</h3>
官方网站：https://www.iconfont.cn/
iconfont 是阿里的一个图标字体库，海量图标库，图标字体非常丰富
但是版权有点模横两可，如果需要商用，最好联系作者
不过一般情况下，公司企业都会有自己的 UI 设计团队，会自己去进行设计
这里使用方式大同小异，不过
<ul>
<li>iconfont 需要添加购物车后再添加至项目然后下载，下载包中有 demo.html，详细介绍了使用方式</li>
<li>iconfont 也提供了一种在线方式，直接在<code>我的项目</code>中选择<code>在线链接</code>可以复制出一份<code>@font-face</code>的 css 代码</li>
</ul>
<img src="https://img-blog.csdnimg.cn/img_convert/e70c3278505584f28c81edfcba5a7056.png" alt="image-20210530193808551" loading="lazy">
后续步骤与前面介绍的一致
示例
<pre><code class="language-html">
<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>


&#xe810;
&#xe811;
&#xe812;
&#xe813;



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.

</code></pre>
效果
<img src="https://img-blog.csdnimg.cn/img_convert/a70ece11e3e329e0e8ef4c00757d59c9.png" alt="image-20210530192058860" loading="lazy">
<h2 id="6-行高">6. 行高</h2>
<h3 id="行高line-height">行高<code>line height</code></h3>
文字占有的实际高度，可以通过<code>line-height</code>来设置行高
<ul>
<li>可以直接指定一个大小 <code>px</code>/<code>em</code></li>
<li>也可以直接为行高设置一个小数（字体大小的倍数）</li>
</ul>
行高经常还用来设置文字的行间距：<code>行间距 = 行高 - 字体大小</code>
<h3 id="字体框">字体框</h3>
字体框就是字体存在的格子，设置<code>font-size</code>实际上就是在设置字体框的高度
行高会在字体框的上下平均分配
<img src="https://img-blog.csdnimg.cn/img_convert/5d51f7775bdc7bef294a884ee41f2a56.png" alt="image-20210601223707187" loading="lazy">
示例
<pre><code class="language-css">border: 1px black solid;
font-size: 100px;
/* line-height: 100px; */
</code></pre>
不指定行高时，<code>content</code>高度<code>131.556px</code>：说明<code>line-height</code>默认值大约是<code>1.31</code> ~ <code>1.32</code>(倍数)
<img src="https://img-blog.csdnimg.cn/img_convert/257b9723fa78a73c3a265e7b1426e034.png" alt="image-20210601221951343" loading="lazy">
指定行高时，<code>content</code>高度<code>99.556px</code>：少了<code>0.444px</code>，并且字母<code>p</code>下面溢出
<img src="https://img-blog.csdnimg.cn/img_convert/1d940e3ba1bb08a10b2f9ca90177b23e.png" alt="image-20210601222500138" loading="lazy">
存疑问题
经测试，<code>line-height</code>大约比<code>100.444px</code>略大一点时，<code>content</code>高度才会大于<code>100px</code>，暂未知原因
<h3 id="字体的简写属性">字体的简写属性</h3>
<code>font</code> 可以设置字体相关的所有属性：
<code>font: font-style font-variant font-weight font-size/line-height font-family</code>
其中某些值可以不写，会用默认值
默认值
<table>
<thead>
<tr>
<th style="text-align: left">属性</th>
<th style="text-align: left">默认值</th>
<th style="text-align: left">其他常用值</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><code>font-style</code></td>
<td style="text-align: left"><code>normal</code></td>
<td style="text-align: left"><code>italic</code></td>
</tr>
<tr>
<td style="text-align: left"><code>font-variant</code></td>
<td style="text-align: left"><code>normal</code></td>
<td style="text-align: left"><code>small-caps</code></td>
</tr>
<tr>
<td style="text-align: left"><code>font-weight</code></td>
<td style="text-align: left"><code>normal</code></td>
<td style="text-align: left"><code>bold</code></td>
</tr>
<tr>
<td style="text-align: left"><code>font-size</code></td>
<td style="text-align: left"><code>medium</code></td>
<td style="text-align: left"><code>small</code>、<code>large</code></td>
</tr>
<tr>
<td style="text-align: left"><code>line-height</code></td>
<td style="text-align: left"><code>normal</code></td>
<td style="text-align: left"></td>
</tr>
<tr>
<td style="text-align: left"><code>font-family</code></td>
<td style="text-align: left">取决于浏览器</td>
<td style="text-align: left"></td>
</tr>
</tbody>
</table>
示例 1
<pre><code class="language-css">/* font-size: 50px;
font-family: 'Courier New', Courier, monospace; */
font: 50px "Courier New", Courier, monospace;
</code></pre>
<img src="https://img-blog.csdnimg.cn/img_convert/9445661b35e1f4b60f42d2e574986b7c.png" alt="image-20210601230239887" loading="lazy">
示例 2
<pre><code class="language-css">/* small-caps值设置小型大写字母字体，所有小写变大写，同时字体尺寸更小（了解即可） */
font: bold small-caps italic 50px "Courier New", Courier, monospace;
</code></pre>
<img src="https://img-blog.csdnimg.cn/img_convert/306d2133b86ba53701b4d24fd9675094.png" alt="image-20210601230211370" loading="lazy">
注意 Pay Attention：简写属性省略的值会使用默认值，所以会覆盖前面的非简写属性（不仅仅对于字体而言）
<h2 id="7-文本对齐方式">7. 文本对齐方式</h2>
<h3 id="水平对齐">水平对齐</h3>
<code>text-align</code> 文本的水平对齐
<table>
<thead>
<tr>
<th style="text-align: left"><code>text-align</code>属性值</th>
<th style="text-align: left">对齐方式说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><code>left</code></td>
<td style="text-align: left">左侧对齐</td>
</tr>
<tr>
<td style="text-align: left"><code>right</code></td>
<td style="text-align: left">右侧对齐</td>
</tr>
<tr>
<td style="text-align: left"><code>center</code></td>
<td style="text-align: left">居中对齐</td>
</tr>
<tr>
<td style="text-align: left"><code>justify</code></td>
<td style="text-align: left">两端对齐</td>
</tr>
</tbody>
</table>
<code>left</code> 左侧对齐
<img src="https://img-blog.csdnimg.cn/img_convert/cb27b2eaacb59d1348b203182527c1bb.png" alt="image-20210601232940646" loading="lazy">
<code>right</code> 右侧对齐
<img src="https://img-blog.csdnimg.cn/img_convert/145cd2242ce0fc188292586c152192f8.png" alt="image-20210601233019483" loading="lazy">
<code>center</code> 居中对齐
<img src="https://img-blog.csdnimg.cn/img_convert/0a311344989446b7b51b9d5ebc9aac80.png" alt="image-20210601233048435" loading="lazy">
<code>justify</code> 两端对齐
<img src="https://img-blog.csdnimg.cn/img_convert/0c1230e4dee40476e5e9a75141358962.png" alt="image-20210601233114528" loading="lazy">
<h3 id="垂直对齐">垂直对齐</h3>
<code>vertical-align</code> 设置元素垂直对齐的方式
<table>
<thead>
<tr>
<th style="text-align: left"><code>vertical-align</code> 属性值</th>
<th style="text-align: left">对齐方式说明</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left"><code>baseline</code></td>
<td style="text-align: left">基线对齐</td>
</tr>
<tr>
<td style="text-align: left"><code>top</code></td>
<td style="text-align: left">顶部对齐</td>
</tr>
<tr>
<td style="text-align: left"><code>bottom</code></td>
<td style="text-align: left">底部对齐</td>
</tr>
<tr>
<td style="text-align: left"><code>middle</code></td>
<td style="text-align: left">居中对齐</td>
</tr>
</tbody>
</table>
<code>baseline</code> 基线对齐
<img src="https://img-blog.csdnimg.cn/img_convert/c2b19aeed53f064e7fe82ca948793bf2.png" alt="image-20210601234706602" loading="lazy">
<code>top</code> 顶部对齐
<img src="https://img-blog.csdnimg.cn/img_convert/4b3a93fc6638b26acc1105a7f02242a7.png" alt="image-20210601234726066" loading="lazy">
<code>bottom</code> 底部对齐
<img src="https://img-blog.csdnimg.cn/img_convert/f5c906386a4ea3c9ffdc80cde6b4291f.png" alt="image-20210601234744834" loading="lazy">
<code>middle</code> 居中对齐
<img src="https://img-blog.csdnimg.cn/img_convert/e5b1f3fc76f55a8600ab3d73e244c529.png" alt="image-20210601234759927" loading="lazy">
这里的居中对齐高度 = 基线高度 + x 的高度 / 2
这种居中对齐并非实际上的居中对齐，一般也不会用这种方式对文字进行垂直方向的对齐
<code>vertical-align</code> 还可以设置 px 值设置垂直对齐方式
<pre><code class="language-css">vertical-align: 10px;
</code></pre>
<img src="https://img-blog.csdnimg.cn/img_convert/77cbc76d13c88a4ba90c06fd813b3e71.png" alt="image-20210601235427136" loading="lazy">
图片的垂直对齐问题
<pre><code class="language-html"><style>
.imgDiv {
border: 5px seagreen solid;
}

.imgDiv img {
width: 400px;
height: 300px;
}
</style>

<div class="imgDiv">
<img src="/assets/news.png" alt="" />
</div>
</code></pre>
<img src="https://img-blog.csdnimg.cn/img_convert/1466b529387379a45ce37a70561e2375.png" alt="image-20210602000108245" loading="lazy">
明显默认情况下，图片底部有一定缝隙，我们稍作修改，给 img 元素添加<code>vertical-align</code>属性值
<pre><code class="language-css">/* 只要不是基线对齐，就能消除底部缝隙 */
vertical-align: top;
vertical-align: bottom;
vertical-align: middle;
</code></pre>
<img src="https://img-blog.csdnimg.cn/img_convert/4c465cbd4b31f9959f3f4245dfd8734f.png" alt="image-20210602000431348" loading="lazy">
Q：为什么图片会有缝隙？
A：图片属于替换元素，特点与文本一致，也有自己的基线，默认也是基线对齐。而基线位置不在最底部，所以会出现缝隙 
来源：https://www.cnblogs.com/vectorx/p/14828845.html

頁: [1]

琼殿技术论坛's Archiver

【Web前端HTML5&CSS3】12-字体