search

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

字体与字体图标、文本属性

溪边小树
溪边小树原创
2020年04月12日 22:58:42905浏览

字体与字体图标

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 设置已经安装在用户设备中的字体族名称 
  1. @font-face {
  2.   /* 字体族 */
  3.   font-family: "SwitzeraADF";
  4.   /* local: 检查用户设备中是否存在指定字体,如果有则优先加载使用 */
  5.   src: local("Switzera-Regular"), local("SwitzeraADF-Regular"),
  6.     /* url:如果用户设备中没有指定字体,则远程下载指定字体 */
  7.       /* format: 允许跳过不支持的格式下载 */ url("SwitzeraADF-Regular.oft")
  8.       format("opentype"), url("SwitzeraADF-Regular.true") format("truetype");
  9. }

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 
  1. /* <p > Hello <span > Peter</span > </p >  */
  2. p {
  3.   font-weight: bold;
  4. }
  6. p span {
  7.   /* span中的文本相对父级文本更粗更黑一级 */
  8.   font-weight: bolder;
  9. }

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. /* 相对父元素字体放大1.2倍 */
  2. font-size: 1.2em;
  3. /* 相对于根元素:root, html */
  4. 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

示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>Document</title>
  7.     <style>
  8.       h1 {
  9.         /* font-family: 字体族列表, 通用字体族; */
  10.         font-family: "Arial", "Helvetica", "New Century", "sans-serif";
  12.         /* 一个字体族名和一个通用字体族名 */
  13.         font-family: Times, "Times New Roman", Georgia, serif;
  14.         font-family: Verdana, Arial, Helvetica, sans-serif;
  15.         font-family: "Lucida Console", Courier, monospace;
  17.         /* 仅有一个通用字体族名 */
  18.         font-family: serif;
  19.         font-family: sans-serif;
  20.         font-family: monospace;
  21.         font-family: cursive;
  22.         font-family: fantasy;
  23.         font-family: system-ui;
  24.         font-family: emoji;
  25.         font-family: math;
  26.         font-family: fangsong;
  28.         /* 全局值 */
  29.         font-family: inherit;
  30.         font-family: initial;
  31.         font-family: unset;
  32.       }
  34.       h2 {
  35.         font-variant: small-caps;
  36.       }
  37.     </style>
  38.   </head>
  39.   <body>
  40.     <h1>PHP中文网</h1>
  41.     <h2>https://www.php.cn</h2>
  42.   </body>
  43. </html>

  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <!-- 引入字体图标的css文档 -->
  7.     <link rel="stylesheet" href="css/font-icon.css" />
  8.     <title>字体图标</title>
  9.     <style>
  10.       .shopping-cart {
  11.         color: coral;
  12.         font-size: 1.5rem;
  13.       }
  14.       .settings {
  15.         font-size: 3rem;
  16.         color: lightseagreen;
  17.         /* border: 2px solid black; */
  18.         background-color: violet;
  19.         border-radius: 50%;
  20.         box-shadow: 0 0 10px #555;
  21.       }
  22.     </style>
  23.   </head>
  24.   <body>
  25.     <div>
  26.       <span class="iconfont shopping-cart">&#xf0179;</span>
  27.       <span class="iconfont">&#xe617;</span>
  28.       <span class="iconfont">&#xe608;</span>
  29.       <span class="iconfont settings">&#xe61f;</span>
  30.       <span class="iconfont">&#xe657;</span>
  31.     </div>
  32.   </body>
  33. </html>
  1. @font-face {
  2.   font-family: "iconfont";
  3.   src: url("../font_icon/iconfont.eot");
  4.   src: url("../font_icon/iconfont.eot?#iefix") format("embedded-opentype"),
  5.     url("../font_icon/iconfont.woff2") format("woff2"),
  6.     url("../font_icon/iconfont.woff") format("woff"),
  7.     url("../font_icon/iconfont.ttf") format("truetype"),
  8.     url("../font_icon/iconfont.svg#iconfont") format("svg");
  9. }
  11. .iconfont {
  12.   font-family: "iconfont" !important;
  13.   font-size: 16px;
  14.   font-style: normal;
  15.   -webkit-font-smoothing: antialiased;
  16.   -moz-osx-font-smoothing: grayscale;
  17. }

文本属性

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

  • 行内框 = 字体高度 + 上下行距
  • 行框 = 由多个行内框组成
  • 行框高度 = 行内框中最高和最底的端决定
  1. /* 内容框 :　内容区高度*/
  2. font-size: 14px;
  4. /* 设置行框 */
  5. /* 行框高度, 行高 */
  6. line-height: 18px;
  8. /* 行距 = 行高-字体高度 = 4px */
  9. /* 上行距 = 下行距 = 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计算,要特别注意

示例

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

课程小结

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

上一条：css-flex布局属性知识小结下一条：html之仿站php.cn
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多