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

最新推荐文章于 2023-08-10 10:10:55 发布
最新推荐文章于 2023-08-10 10:10:55 发布
阅读量2.4k 收藏 25
点赞数 4
分类专栏： # Web前端从入门到精通 文章标签： 前端 html5 css3 html css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35925558/article/details/117403952
版权

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

文章目录

字体

1. 字体相关的样式

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

  • color用来设置字体颜色

  • font-size字体的大小

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

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

2. font-family

font-family 字体族（字体的格式）

  • serif 衬线字体

    image-20210530142246598

  • sans-serif 非衬线字体

  • monospace 等宽字体

    image-20210530142305540

  • cursive 手写体

    image-20210530143056539

  • fantasy 梦幻字体

    image-20210530142030295

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

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

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

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

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

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

image-20210530144745242

3. 几种字体

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

手写体

Indie Flower

image-20210530150501201

Ink Free

image-20210530150547525

Nanum Pen

image-20210530151638440

MV Boli

image-20210530151419977

Segoe Print

image-20210530151937732

Shadows Into

image-20210530152032865

艺术体

Barrio

image-20210530144925484

Julius Sans One

image-20210530150656102

Lobster

image-20210530150750662

Monoton

image-20210530151219084

Poiret One

image-20210530151802098

乱码字体

MT Extra

image-20210530151339624

Symbol

image-20210530152221092

Webdings

image-20210530152413018

Wingdings

image-20210530152450136

中文字体

方正粗黑宋简体

image-20210530153059327

微软雅黑

image-20210530153435455

黑体

image-20210530153142702

楷体

image-20210530153207163

宋体

image-20210530153247029

仿宋

image-20210530153119913

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;
}

image-20210530164007022

问题

  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. 设置字体的样式
    • fab：font-family: 'Font Awesome 5 Brands';
    • fas：font-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>

效果

image-20210530185058977

通过实体设置

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

示例

<i class="fas">&#xf025;</i>

效果

image-20210530185606771

iconfont

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

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

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

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

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

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

image-20210530193808551

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

示例

<!-- <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">&#xe810;</i>
<i class="iconfont">&#xe811;</i>
<i class="iconfont">&#xe812;</i>
<i class="iconfont">&#xe813;</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>

效果

image-20210530192058860

6. 行高

行高line height

文字占有的实际高度，可以通过line-height来设置行高

  • 可以直接指定一个大小 px/em
  • 也可以直接为行高设置一个小数（字体大小的倍数）

行高经常还用来设置文字的行间距：行间距 = 行高 - 字体大小

字体框

字体框就是字体存在的格子，设置font-size实际上就是在设置字体框的高度

行高会在字体框的上下平均分配

image-20210601223707187

示例

border: 1px black solid;
font-size: 100px;
/* line-height: 100px; */

不指定行高时，content高度131.556px：说明line-height默认值大约是1.31 ~ 1.32(倍数)

image-20210601221951343

指定行高时，content高度99.556px：少了0.444px，并且字母p下面溢出

image-20210601222500138

存疑问题

经测试，line-height大约比100.444px略大一点时，content高度才会大于100px，暂未知原因

字体的简写属性

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

font: font-style font-variant font-weight font-size/line-height font-family

其中某些值可以不写，会用默认值

默认值

属性默认值其他常用值
font-stylenormalitalic
font-variantnormalsmall-caps
font-weightnormalbold
font-sizemediumsmall、large
line-heightnormal
font-family取决于浏览器

示例1

/* font-size: 50px;
font-family: 'Courier New', Courier, monospace; */
font: 50px 'Courier New', Courier, monospace;

image-20210601230239887

示例2

/* small-caps值设置小型大写字母字体，所有小写变大写，同时字体尺寸更小（了解即可） */
font: bold small-caps italic 50px 'Courier New', Courier, monospace;

image-20210601230211370

注意 Pay Attention：简写属性省略的值会使用默认值，所以会覆盖前面的非简写属性（不仅仅对于字体而言）

7. 文本对齐方式

水平对齐

text-align 文本的水平对齐

text-align属性值对齐方式说明
left左侧对齐
right右侧对齐
center居中对齐
justify两端对齐

left 左侧对齐

image-20210601232940646

right 右侧对齐

image-20210601233019483

center 居中对齐

image-20210601233048435

justify 两端对齐

image-20210601233114528

垂直对齐

vertical-align 设置元素垂直对齐的方式

vertical-align 属性值对齐方式说明
baseline基线对齐
top顶部对齐
bottom底部对齐
middle居中对齐

baseline 基线对齐

image-20210601234706602

top 顶部对齐

image-20210601234726066

bottom 底部对齐

image-20210601234744834

middle 居中对齐

image-20210601234759927

这里的居中对齐高度 = 基线高度 + x的高度 / 2

这种居中对齐并非实际上的居中对齐，一般也不会用这种方式对文字进行垂直方向的对齐

vertical-align 还可以设置px值设置垂直对齐方式

vertical-align: 10px;

image-20210601235427136

图片的垂直对齐问题

<style>
    .imgDiv {
        border: 5px seagreen solid;
    }

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

<div class="imgDiv">
    <img src="/assets/news.png" alt="">
</div>

image-20210602000108245

明显默认情况下，图片底部有一定缝隙，我们稍作修改，给img元素添加vertical-align属性值

/* 只要不是基线对齐，就能消除底部缝隙 */
vertical-align: top;
vertical-align: bottom;
vertical-align: middle;

image-20210602000431348

Q：为什么图片会有缝隙？

A：图片属于替换元素，特点与文本一致，也有自己的基线，默认也是基线对齐。而基线位置不在最底部，所以会出现缝隙

VectorUx
关注
  • 4
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
头歌教学实践平台 Web前端开发基础 CSS-文本与字体样式
01-20
头歌教学实践平台 Web前端开发基础 CSS——文本与字体样式。源码txt格式。
用CSS设计艺术字集锦二特效代码
03-20
Web前端进阶教程，前端HTML5+CSS3+移动端项目实战（魅族官网+小米+迅雷移动端等）_Web前端零基础全套视频教程
05-22
需要视频配套的案例源码 课件 笔记等资料 ，可以私信UP"web",直接拿走吧你~~~ HTML5是互联网的下一代标准，是构建以及呈现互联网内容的一种语言方式．被认为是互联网的核心技术之一。 HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开 CSS：层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。 本课程采用2+5模式，前两天承接HTML+CSS，使用字体图标、平面转换、动画等，丰富网页效果和呈现方式；后5天完成移动端和多端适配效果。课程采用闭环方式设计，每章节都配备综合案例，学完即练习企业级项目，让小伙伴不仅掌握知识点，还能学到知识点在实际开发中的应用场景， 让小伙伴学以致用。
HTML5+CSS3 快速入门 前端 源代码.rar
10-06
Java web前端开发常用技术之一，可快速构建极具客户体验度的应用。本课程由有着多年实战开发的资深web前端开发工程师朱朝兵老师为大家录制，从html5+css3基础知识，到实战案例分析，实际操作，均有详细讲解。 1.课程简介07:40 2.什么是HTML510:02 3.认识新的网页结构05:22 4.article元素的使用方法10:27 5.section元素11:16 6.aside元素06:06 7.nav元素07:46 8.time元素01:51 9.pubdate属性04:31 10.header元素合成13:11 11.hgroup元素合成05:43 12.footer元素07:04 13.address元素合成04:20 14.figure元素与figcaption元素05:14 15.details元素与summary元素05:09 16.mark元素09:47 17.progress元素05:01 18.meter元素10:45 19.html5废除的元素07:30 20.HTML5的大纲（上）17:58 21.HTML5的大纲（下）23:18 22.加强版的ol列表元素09:05 23.重新定义后的dl元素04:55 24.canvas元素创建画布06:26 25.canvas绘制矩形18:21 26.canvas绘制圆形21:20 27.canvas绘制文字30:32 28.canvas保存文件08:07 29.canvas绘制动画24:05 30.Web Storage本地储存15:40 31.简单的网页留言板26:36 32.video元素与audio元素的基础知识20:10 33.video元素与audio元素的常用属性32:18 34.HTML5拖放22:41 35.CSS3简介04:11 36.CSS3新增的属性选择器22:17 37.结构性伪类选择器上28:52 38.结构性伪类选择器下21:00 39.使用选择器在页面中插入内容34:26 40.文字阴影与自动换行20:24 41.服务器端字体和@font-face属性21:50 42.盒布局上18:03 43.盒布局下27:48 44.overflow属性30:44 45.CSS3中新增的背景属性41:59 46.CSS3中边框相关的样式29:22 47.CSS3中的变形功能25:48 48.CSS3中的动画功能36:41 49.布局相关的样式-多栏布局14:41 50.布局相关的样式-盒布局12:16 51.布局相关的样式-弹性盒布局30:26 52.Media Queries 与自适应布局36:57 53.UI元素状态伪类选择器上30:11 54.UI元素状态伪类选择器下28:56 55.集团网站建设-全局头部制作57:36 56.集团网站建设-首页新闻列表52:17 57.集团网站建设-首页集团活动制作36:28 58.集团网站建设-首页右部份制作35:57 59.集团网站制作-底部版权信息制作08:44 60.集团网站建设-图片列表页制作50:30 61.集团网站建设-文章内容页制作22:20 62.关于兼容性的问题
Web-前端html+css从入门到精通 155. @fontface字体图标.zip
05-23
Web-前端html+css从入门到精通 155. @fontface字体图标.zip
9款漂亮的纯css字体样式
十一月廿七风雨大作
02-04 2万+
样式： 代码： <html> <head> </head> <style> body{ text-align: center; } .hcqFont{position:relative;letter-spacing:.07em;font-size:3em;font-weight:normal;margin:0 auto} .hcqFont:before,.hcqFont:after{position:absolute
css-艺术字
蓝冰凌的博客
03-12 1022
var c = document.getElementById("canvas"); var cxt = c.getContext("2d"); cxt.font = "26px Verdana"; let data = "场景配置可视化" let gradient; for (let i = 0; i < data.length; i++) { ...
HTML，JS，CSS如何输出艺术字体
emptyset的博客
08-10 3176
艺术字
css实现艺术字
lll19960406的博客
04-17 2034
最近在写一个新的小活动，本来有涉及艺术字的标题，本来是想用图片展示的，后来面向百度编程的时候，发现可以使用css来实现 效果及代码如下 font-size: 60rpx; color: #fff; text-shadow: 0 0 5px #FF0200, 0 0 10px #727272; text-align: center; margin: 30r...
巧用CSS制作艺术字
sugar88的学习收集专栏
08-01 8729
 巧用CSS制作艺术字 ::..如果灵活应用CSS各种滤镜的特点并加以组合，我们可以得到许多意想不到的效果。这是一些效果示范，供各位参考。西部电子用blur滤镜做出的效果，代码如下：FILTER: blur(direction=135,strength=8)西部电子用dropshadow滤镜做出的效果，代码如下：FILTER: dropshadow(color=#B4BBCF,offx=6,off
Web-前端html+css从入门到精通 157. 自定义字体图标.zip
05-23
Web-前端html+css从入门到精通 157. 自定义字体图标.zip
前端HTML5 css基础
03-09
前端HTML5基础知识点 HTML5骨架 ---------------- * `<!DOCTYPE html>`：声明文档类型，指定当前页面使用 HTML5 版本显示网页。 * `<html lang="en">`：定义文档语言，例如英语（en）或中文（zh-ZN）。 * `...
零基础学习WEB前端开发(十六)：font-family字体系列
陶小桃Blog
11-05 1051
一、基本语法 font-family 二、演示 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scal.
巧用CSS制作特效艺术字(7例)
ietiany的专栏
03-29 3256
1.blur滤镜效果:代码如下： 欢迎光临WEB开发网www.cncms.com.cn！ 2.dropshadow滤镜效果:代码如下：欢迎光临WEB开发网www.cncms.com.cn！  3.glow滤镜效果代码如下： 欢迎光临WEB开发网www.cncms.com.cn！ 4.两种滤镜.shadow和alpha效果:代码如下： 欢迎光临WEB开发网
css文本设置艺术字,CSS3中字体和文本的相关设置
weixin_42667269的博客
08-03 2201
字体：font(简写属性)1.font-family2.font-size3.font-weight(字重:lighter bold bolder normal )4.font-style(可以理解成Italic是使用文字的斜体，Oblique是让没有斜体属性的文字倾斜！)5.font-variant(可取值为normal和small-caps)1.注意为你的页面添加通用字体，通用字体包括(ser...
web前端20种字体
热门推荐
Ghjkku的博客
11-14 2万+
【代码】web前端20种字体。
HTML怎么设艺术字体,用CSS设计艺术字集锦（二）
weixin_30363285的博客
06-17 2687
网页特效代码|JsCode.CN|---用CSS设计艺术字集锦(二).title_1 {FONT-SIZE: 12px; FILTER: DropShadow(Color=#213C63, OffX=1, OffY=1); WIDTH: 100%; COLOR: #e1e4ec; FONT-FAMILY: "Verdana"}.text {FONT-SIZE: 12px; COLOR: #6666...
二十款漂亮的CSS字体样式
qq_38866594的博客
05-06 4492
【代码】二十款漂亮的CSS字体样式。
【Web前端HTML5&CSS3】03-字符实体与语义标签
VectorX's Blog
05-16 6090
字符实体与语义标签 1. 字符实体 2. meta标签 3. 语义标签 4. 块元素与行内元素 块元素（block element） 行内元素（inline element） 5. 内容修正 6. 布局标签 7. 列表 8. 超链接 外部地址 内部地址 新建页面 锚点跳转 9. 图片 图片格式 jpeg（jpg） gif png webp base64 10. 内联格式 11. 音视频 音频 source embed 视频 其他...
html5+css3web前端开发总复习题及答案
最新发布
09-08
HTML5和CSS3是用于网页设计和开发的最新标准技术。以下是一些常见的HTML5和CSS3开发的总复习题及答案。 1. HTML5中的新特性有哪些？ 答案：HTML5中的新特性包括语义化标签（如<article>、<section>和<header>等），音频和视频支持，Canvas画布，本地存储（localStorage和sessionStorage），地理位置API等等。 2. CSS3中的新特性有哪些？ 答案：CSS3中的新特性包括圆角边框（border-radius），阴影（box-shadow），渐变背景（linear-gradient和radial-gradient），动画（@keyframes），过渡（transition）等等。 3. 如何在HTML文档中引用外部CSS文件？ 答案：可以使用<link>标签将外部CSS文件链接到HTML文档中。例如：<link rel="stylesheet" href="style.css"> 4. 如何在HTML文档中引用外部JavaScript文件？ 答案：可以使用<script>标签将外部JavaScript文件链接到HTML文档中。例如：<script src="script.js"></script> 5. 如何在HTML文档中插入图片？ 答案：可以使用<img>标签插入图片。例如：<img src="image.jpg" alt="描述文本"> 6. 如何创建一个有序列表（有序的编号）？ 答案：可以使用<ol>和<li>标签创建有序列表。例如：<ol><li>第一项</li><li>第二项</li></ol> 7. 如何创建一个无序列表（无序的项目符号）？ 答案：可以使用<ul>和<li>标签创建无序列表。例如：<ul><li>项目一</li><li>项目二</li></ul> 8. 如何创建一个超链接？ 答案：可以使用<a>标签创建超链接。例如：<a href="http://www.example.com">链接文本</a> 9. 如何设置文本的字体样式？ 答案：可以使用font-family属性设置文本的字体样式。例如：font-family: Arial, sans-serif; 10. 如何调整盒子的位置和大小？ 答案：可以使用margin、padding、width和height属性来调整盒子的位置和大小。例如：margin: 10px; padding: 20px; width: 200px; height: 150px; 这些问题和答案只是一部分HTML5和CSS3开发的总复习题目。希望对你进行复习和巩固知识有所帮助。请继续学习和实践，加深对于HTML5和CSS3的理解和运用。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值