微信公众号讲师中心

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机/移动开发手机游戏

搜索

后端开发 web前端数据库开发工具 php框架常见问题科技 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程

首页 > 博客列表 > 字体与字体图标、文本属性

博主信息

博文 26

粉丝 0

访问量 28515

专题推荐

更多>

字体与字体图标

1. 字体常用属性汇总

序号	属性	描述
1	`font-family`	设置字体族
2	`@font`	设置自定义字体族
3	`font-weight`	设置字体粗细, 字重
4	`font-size`	设置字体大小(字号)
5	`font-style`	设置字体样式
6	`font-strecth`	设置字体拉伸
7	`font`	简化字体设置

2.2 五种通用字体族

通用字体族简介

序号	名称	字型宽度	是否有衬线	备注
1	衬线字体	各不相同	有	衬线指笔划尾部有装饰
2	无衬线字体	各不相同	无	笔划尾部部无装饰
3	等宽字体	全部相同	有 / 无	常用于编程或表格数据
4	草书字体	各不相同	有 / 无	也叫手写字体,模仿人类笔迹
5	艺术字体	各不相同	有 / 无	无统一规范,用于展示特殊内容

font-family可设置的字体族

序号	属性	描述	示例
1	`serif`	衬线字体	`Times`,`New Century`,`Ceorgia`
2	`sans-serif`	无衬线字体	`Helvetica`,`Geneva`,`Verdana`,`Arial`
3	`monospace`	等宽字体	`Menlo`, `Monaco`, `'Courier New'`,`Consolas`
4	`cursive`	草书字体	`Helvetica`,`Geneva`,`Verdana`,`Arial`
5	`fantasy`	艺术字体	`Author`,`Comic Sans`,`Zapf Chancery`

字体族名称由多个单词构成, 或者与 css 关键字相同时, 必须使用”引号”做为定界符

2.3 其它常用字体族

序号	属性	描述
1	`system-ui`	从浏览器获取到用户界面的系统默认字体,差别极大
2	`math`	显示数学相关字符的特殊样式, 支持上标和下标,跨行括号,嵌套
3	`emoji`	专门用于呈现 Emoji 表情符号的字体
4	`fangsong`	中文仿宋体:介于宋体和楷体之间,常用于政府文件

3. `@font-face`

3.1 属性简介

该属性的值,是一个属性集合

名称	描述
功能	设置显示文本的自定义字体
语法	`@font-face {...}`

3.2 `@font-face`:常用属性

序号	属性	必选?	描述
1	`font-family`	必选	设置自定义字体族
2	`src`	必选	自定义字体族对应的字体文件所在路径
3	`font-weight`	可选	设置字体粗细
4	`font-size`	可选	设置字体大小(字号)
5	`font-style`	可选	设置字体样式
6	`font-strecth`	可选	设置字体拉伸
7	`unicode-range`	可选	限制字符范围,Unicode 码: `U+0-10FFF`

3.3 常用字体文件格式

序号	格式	全称	描述
1	EOT	Embedded OpenType	IE 专用字体
2	OTF	OpenType	非 IE 通用字体
3	SVG	Scalable Vector Graphics	基于 SVG 方式渲染
4	TTF	TrueType	通用原始字体
5	WOFF	Web Open Font Format	Web 通用字体

3.4 `src`属性详解

@font-face的src属性中常用关键字:

序号	关键字	描述
1	`url`	设置字体文件路径
2	`format`	设置字体格式,使浏览器可跳过不支持的格式
3	`local`	设置已经安装在用户设备中的字体族名称

@font-face {
  /* 字体族 */
  font-family: "SwitzeraADF";
  /* local: 检查用户设备中是否存在指定字体,如果有则优先加载使用 */
  src: local("Switzera-Regular"), local("SwitzeraADF-Regular"),
    /* url:如果用户设备中没有指定字体,则远程下载指定字体 */
      /* format: 允许跳过不支持的格式下载 */ url("SwitzeraADF-Regular.oft")
      format("opentype"), url("SwitzeraADF-Regular.true") format("truetype");
}

4. `font-weight`

该属性用于设置字体的字重,即粗细,常用属性如下:

序号	属性值	描述
1	`normal`	默认值
2	`bold`	比默认值加粗加黑一级
3	`bolder`	相对父级`font-weight`加粗加黑一级
4	`lighter`	相对父级`font-weight`加粗加黑减少一级

字重除了用关键字描述之外,还可以用整数100-900表示
不同的字体族, 数值对应的加粗级别并不一致,大致如下

序号	值	对应的`font-weight`关键字
1	`100 - 500`	`normal`
2	`600-900`	`bold`

/* <p > Hello <span > Peter</span > </p >  */
p {
  font-weight: bold;
}
p span {
  /* span中的文本相对父级文本更粗更黑一级 */
  font-weight: bolder;
}

5. `font-size`

该属性用来设置字体大小, 常用属性值

序号	属性值	描述	换算
1	`xx-small`	最小	`10px`
2	`x-small`	较小	`12px`
3	`small`	小号	`14px`
4	`medium`	默认值,如 16px	`16px`
5	`large`	大号	`19px`
6	`x-large`	较大	`24px`
7	`xx-large`	最大	`32px`
8	`larger`	相对父级增大一级	`*1.2`
9	`smaller`	相对父级减少一级	`/1.2`
10	`length`	绝对值,如`px`,`em`	无
11	`percentage`	百分比/em/rem	无

除length外,其它都是相对大小,无固定值
每一级之间换算系数由浏览器自行调整,如 1.2
em: 相对父元素, rem: 相对于根元素

/* 相对父元素字体放大1.2倍 */
font-size: 1.2em;
/* 相对于根元素:root, html */
font-size: 1.2rem;

6. `font-style`

设置字体样式, 常用值

序号	属性值	描述
1	`normal`	默认值
2	`italic`	斜体
3	`oblique`	适用部分字体的斜体

7. `font-variant`

设置字体变形,如连写,大写,小数,零是否有贯穿线等

序号	属性值	描述
1	`normal`	默认值
2	`small-caps`	小号大写字母

小号大写字母: 即不是大写也不是小写,而是大小稍有区别的大写字母

8. `font-stretch`

设置字体显示时拉伸或收缩
当字体族中有宽体或窄体时, 该属性才有效

序号	属性值	描述
1	`normal`	默认值
2	`expanded`	拉伸
3	`condensed`	收缩

该属性的值非常多, 更多查阅手册

9. `font`

将字体设置相关属性,使用该属性进行简化
语法:font:font-style,font-weight,font-variant,font-size, font-family

9.1 可选值,顺序任意

序号	属性值	描述
1	`font-style`	字体样式
2	`font-weight`	字体字重
3	`font-variant`	字体变形

9.2 必选值,顺序固定

序号	属性值	描述
1	`font-size`	字体大小
2	`font-family`	字体族

font-size: 还能同时设置行高,如 font-size: 24px/1.2: 设置行高为 24px*1.2=28.8px

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      h1 {
        /* font-family: 字体族列表, 通用字体族; */
        font-family: "Arial", "Helvetica", "New Century", "sans-serif";
        /* 一个字体族名和一个通用字体族名 */
        font-family: Times, "Times New Roman", Georgia, serif;
        font-family: Verdana, Arial, Helvetica, sans-serif;
        font-family: "Lucida Console", Courier, monospace;
        /* 仅有一个通用字体族名 */
        font-family: serif;
        font-family: sans-serif;
        font-family: monospace;
        font-family: cursive;
        font-family: fantasy;
        font-family: system-ui;
        font-family: emoji;
        font-family: math;
        font-family: fangsong;
        /* 全局值 */
        font-family: inherit;
        font-family: initial;
        font-family: unset;
      }
      h2 {
        font-variant: small-caps;
      }
    </style>
  </head>
  <body>
    <h1>PHP中文网</h1>
    <h2>https://www.php.cn</h2>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- 引入字体图标的css文档 -->
    <link rel="stylesheet" href="css/font-icon.css" />
    <title>字体图标</title>
    <style>
      .shopping-cart {
        color: coral;
        font-size: 1.5rem;
      }
      .settings {
        font-size: 3rem;
        color: lightseagreen;
        /* border: 2px solid black; */
        background-color: violet;
        border-radius: 50%;
        box-shadow: 0 0 10px #555;
      }
    </style>
  </head>
  <body>
    <div>
      <span class="iconfont shopping-cart">&#xf0179;</span>
      <span class="iconfont">&#xe617;</span>
      <span class="iconfont">&#xe608;</span>
      <span class="iconfont settings">&#xe61f;</span>
      <span class="iconfont">&#xe657;</span>
    </div>
  </body>
</html>

@font-face {
  font-family: "iconfont";
  src: url("../font_icon/iconfont.eot");
  src: url("../font_icon/iconfont.eot?#iefix") format("embedded-opentype"),
    url("../font_icon/iconfont.woff2") format("woff2"),
    url("../font_icon/iconfont.woff") format("woff"),
    url("../font_icon/iconfont.ttf") format("truetype"),
    url("../font_icon/iconfont.svg#iconfont") format("svg");
}
.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

文本属性

1. 属性简介

序号	属性	描述
1	`text-indent`	文本缩进
2	`text-align`	文本行内对齐
3	`line-height`	行高
4	`vertical-align`	文本垂直对齐
5	`word-spacing`	单词间距
6	`text-transform`	大小写转换
7	`text-decoration`	文本修饰
8	`text-shadow`	文本阴影
9	`white-space`	文本空白处理
10	`overflow-wrap`	文本溢出换行
11	`writing-mode`	文本书写模式
12	`writing-mode`	文本书写模式
13	`text-orientation`	改变文本方向

2. 文本缩进与行内对齐

缩进与行内对齐: 控制文本在一行内的位置
块级方向: 块级元素排列方向(垂直排列)
行内方向: 行内元素排列方向(水平排列)

2.1 `text-indent`文本缩进

属性: text-indent
text-indent只能用在块级元素上,控制段落首行文本的缩进长度,允许负值
如果想缩进行内元素首行,只能使用margin | padding实现
该属性常用值

序号	属性值	描述
1	`length`	绝对值,如`30px`,`2em`
2	`percentage`	相对父元素宽度的百分比,如`10%`

2.2 `text-align`文本行内对齐

该属性也是设置父元素上,如<p>
该属性用于控制父元素中每一行文本的对齐方向
常用的属性值如下

序号	属性值	描述
1	`left`	左对齐:默认值
2	`right`	右对齐
3	`center`	居中对齐

以上属性值,都是以常见的英文书写模式定义的,即从左到右书写
实际上还有其它的书写模式,如阿拉伯语,希伯来语,它们是从右向左书写
所以, css3 对以上属性值进行规范,语义化更强了

序号	属性值	描述
1	`start`	对齐到起始边:默认值
2	`end`	对齐到终止边
3	`justify`	两端对齐

两端对齐: 文本之间空白会自动调整, 确保文本每一行长度一致

3. 块级对齐

文本在一行内,除了水平对齐外,还有垂直/纵向对齐,即沿块级方向对齐
块级对齐,必须要有布局的空间, 即高度
如果想实现文本在行内垂直方向的对齐, 必须先要掌握行高的概念

3.1 术语

序号	术语	描述
1	文本行	垂直排列的一行或多行文本
2	内容区	文本行中的每个元素(行内元素)
3	行内框	包裹内容区的元素框
3	行距	行距都是相同的,不同的是字体高度
4	行框	行框是行内框的集合

line-height

行内框 = 字体高度 + 上下行距
行框 = 由多个行内框组成
行框高度 = 行内框中最高和最底的端决定

/* 内容框 :　内容区高度*/
font-size: 14px;
/* 设置行框 */
/* 行框高度, 行高 */
line-height: 18px;
/* 行距 = 行高-字体高度 = 4px */
/* 上行距 = 下行距 = 4/2 =2px */

3.2 `line-height`设置文本行的高度

序号	属性值	描述
1	`normal`	默认值,由浏览器自动计算,约`font-size * 1.2`
2	绝对值	如`px`, `em`,`rem`,推荐`px`
3	正数	相对`font-size`的换算系数,可以是小数,推荐
3	百分数	依据字体大小进行计算,可能具有不确定性

line-height在继承时,子元素是依据父元素的font-size计算,要特别注意

示例

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        color: #666;
        font: 16px/1.5 Helvetica;
        width: 300px;
        background-color: lavender;
        border-radius: 10px;
        padding: 20px;
        text-indent: 2em;
        text-indent: -6em;
        /* text-indent: 30%; */
      }
      p img {
        width: 90px;
        height: 65px;
        margin-top: 25px;
        margin-right: 5px;
        float: left;
      }
    </style>
  </head>
  <body>
    <p>
      <img src="images/2.jpg" alt="" />
哈啰单车事业部总经理褚轶群介绍，近一个多月，哈啰单车在多个城市的骑行订单量也出现阶梯式上升的趋势，同时用户的骑行里程相比之前也有所提升。
为满足日益增加的骑行需求，哈啰出行不断提升运营效率，加快对各城市旧车坏车的置换，同时哈啰还于近期发布了旗下第五代共享单车“云行”，首批300多辆已经于3月30日落地广州，并将于4月起陆续进入更多城市。
相比前几代单车，“云行”依然采用了蓝白相间的配色，重点加强模块化设计，车把、挡泥板等部位高度一体化，改善了传统共享单车架型因整合程度不够高，在运营一段时间后，常因零部件松动带来“松懈感”。“云行”的动力系统独立于其他模组，通过降低相互影响延长稳定性，增强抗破坏能力。
    </p>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        color: #666;
        font: 16px/1.5 Helvetica;
        width: 300px;
        background-color: lavender;
        border-radius: 10px;
        padding: 20px;
        text-indent: 2em;
      }
      p {
        /* text-align: left;
        text-align: right;
        text-align: center; */
        text-align: start;
        /* text-align: end; */
        text-align: justify;
        text-align-last: end;
        text-align-last: center;
      }
    </style>
  </head>
  <body>
    <p>
      哈啰单车事业部总经理褚轶群介绍，近一个多月，哈啰单车在多个城市的骑行订单量也出现阶梯式上升的趋势，同时用户的骑行里程相比之前也有所提升。
为满足日益增加的骑行需求，哈啰出行不断提升运营效率，加快对各城市旧车坏车的置换，同时哈啰还于近期发布了旗下第五代共享单车“云行”，首批300多辆已经于3月30日落地广州，并将于4月起陆续进入更多城市。
相比前几代单车，“云行”依然采用了蓝白相间的配色，重点加强模块化设计，车把、挡泥板等部位高度一体化，改善了传统共享单车架型因整合程度不够高，在运营一段时间后，常因零部件松动带来“松懈感”。“云行”的动力系统独立于其他模组，通过降低相互影响延长稳定性，增强抗破坏能力。
    </p>
  </body>
</html>

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body {
        font-size: 16px;
        line-height: 20px;
      }
      p:nth-of-type(2) {
        /* 20px * 1.5 = 30px */
        /* 行高继承的时候,并不是依据父元素的line-height, 而是font-size */
        line-height: 1.5em;
      }
      p:last-of-type {
        /* line-height: 8px; */
        /* 1 * font-size = 16px */
        line-height: 1;
        line-height: 2;
        background-color: cyan;
      }
    </style>
  </head>
  <body>
    <p>这个段落继承了body中的字体大小与行高</p>
    <p>这个段落行高是父级的1.5倍</p>
    <p>行高小于字体大小</p>
  </body>
</html>

课程小结

本次课程较为全面地学习了字体与字体图标、文本属性等相关知识点，通过老师列举的一些易懂的实例帮助我们理解，收获不少，主要内容有：
1、字体的各种类型及表示方法，自定义字体族；
2、字体图标的获取，网上下载资料库，包含对用代码，字体图标库的使用，通过设置本地路径，嵌入至CSS中，与html结合使用；
3、字体属性的设置要点解读，注意字体行高概念的理解。

批改老师：

天蓬老师

批改状态：合格

老师批语：这些知识点, 很容易被忽略的,但却很重要

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

html基础知识学习小结

2020-04-03 18:29:43

关于我们免责申明举报中心意见反馈讲师合作广告合作最新更新 English: php中文网：公益在线php培训，帮助PHP学习者快速成长！; 关注服务号技术交流群

PHP中文网订阅号: 每天精选资源文章推送

PHP中文网APP: 随时随地碎片化学习

PHP学习

技术支持

返回顶部

登录PHP中文网，和优秀的人一起学习！

全站2000+教程免费学

字体与字体图标

1. 字体常用属性汇总

2.2 五种通用字体族

2.3 其它常用字体族

3. @font-face

3.1 属性简介

3.2 @font-face:常用属性

3.3 常用字体文件格式

3.4 src属性详解

4. font-weight

5. font-size

6. font-style

7. font-variant

8. font-stretch