html设置字体大小—html设置字体大小标签 收藏 0

HTML/CSS 备忘录 – 09. CSS 颜色/长度/字体/文本

1. 通过颜色名称表示

颜色名称：https://developer.mozilla.org/zh-CN/docs/Web/CSS/named-color

2. RGB/RGBA 的方式

3. HEX/HEXA（十六进制 RGB）的方式

4. HSL/HSLA 的方式

• 色相：取值范围是 0~360 度，具体度数对应的颜色如下图：

• 饱和度：取值范围是 0%~100% 。（向色相中对应颜色中添加灰色， 0% 全灰， 100% 没有灰）。
• 亮度：取值范围是 0%~100% 。（ 0% 亮度没了，所以就是黑色。 100% 亮度太强，所以就是白色了）。

• px：像素，常用绝对长度单位。
• em：相对于父元素的字体大小。
• rem：相对于根元素的字体大小。
• vh：相对于视口的高度。
• vw：相对于视口的宽度。
• 百分比：相对于其他值设置的。例如，如果将元素的字体大小设置为百分比，那么它将是元素父元素字体大小的百分比。如果使用百分比作为宽度值，那么它将是父值宽度的百分比。

• font-family：字体类型。
• font-size：字体大小。
• font-style：字体样式。
• font-weight：字体粗细。
• font：字体复合属性。

1. 字体类型

如果字体名包含空格，必须使用引号包裹起来。可以设置多个字体，按照从左到右的顺序逐个查找，找到就用，没有找到就使用后面的

2. 字体大小

• Chrome 浏览器默认的文字大小为 16px。不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值，不要用默认大小。
• 通常以给 body 设置 font-size 属性，这样 body 中的其他元素就都可以继承了。

3. 字体样式

• normal：正常，默认值。
• italic：斜体，字体自带的斜体效果。
• oblique：强制倾斜字体。

4. 字体粗细

• lighter：细。
• normal：正常。
• bold：粗。
• bolder：很粗（大多字体不支持）。

也可以使用数值：

• 100~1000 且无单位，数值越大，字体越粗 (或一样粗，具体得看字体设计时的精确程度)。
• 100~300 等同于 lighter，400~500 等同于 normal，600 及以上等同于 bold。

5. 字体复合属性

• 字体大小、字体族必须都写上。
• 各个属性间用空格隔开。
• 字体族必须是最后一位、字体大小必须是倒数第二位。

6. 网络字体（CSS3）

可以通过 @font-face 指定字体的具体地址，浏览器会自动下载该字体，这样就不依赖用户电脑上的字 体了

字体图标库：https://www.iconfont.cn/

• color：文本颜色。
• letter-spacing：字母间距。
• word-spacing：单词间距。
• text-decoration：文本装饰线，可以设置类型（none，underline，overline，line-through）、样式（dotted，wavy）、颜色。
• text-indent：文本缩进。
• text-align：水平对齐，left（默认），right，center。
• line-height：行高。
• vertical-align：用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式，不能控制块元素。
• white-space：空白处理方式。

CSS3 新增样式：

• text-overflow：文本溢出。
• text-shadow：文本阴影。
• -webkit-text-stroke：文字描边复合属性，可设置宽度、颜色。

字体框是设计字体时，采用的指定高度，这个高度一旦确定就不会更改。而字体框的宽度会按照比例自行修改。而 font-size 属性就是指这个字体框的高度。任何字体的基线都是当前字体字母 x 下端的水平线。

由于字体设计的一些特性，导致字体一些约定俗成的协议如下：虽然存在字体框的约束，但是为了字体美观性，超出字体框的现象都存在。比如字母：f、j、g 等，但是他们都不可能超过上字体框。

• 基线（base-line）：小写英文字母 x 的下边缘(线)。
• 中线（middle）：横过小写英文字母 x 的中间的线。
• 行高（line-height）：定义的两行文字基线之间的距离。
• line-height 与 font-size 的差值（行距）分为两半，分别加到一个文本行内容的顶部和底部。

如何在网页中使用 web 字体？

从前，浏览器只能展示本地安装的字体。如果字体未安装，网页显示效果会大打折扣。

为了解决这个问题，CSS 引入 web 字体，允许浏览器从服务器下载字体，下载完成后再重新渲染字体。

使用 web 字体前，需要了解常用的字体文件格式。

TTF 字体文件，即 TrueType 字体，是由苹果和微软在 20 世纪 80 年代末开发的字体标准。它是 macOS 和 Windows 操作系统使用最广泛的字体格式。

OTF 字体文件，即 OpenType 字体，是一种可缩放的计算机字体格式。它建立在 TrueType 基础上，是微软的注册商标。OpenType 字体目前在主要的计算机平台上广泛使用。

WOFF 字体文件，即 The Web Open Font Format 字体，是一种用于网页的字体格式，2009 年开发，如今是 W3C（万维网联盟）的推荐标准。WOFF 本质是 OpenType 或 TrueType 字体，但是经过压缩并附加额外的元数据。在带宽受限的网络中，WOFF 能更好的支持从服务器到客户端的字体传输。

WOFF 2.0 字体文件，相比于 WOFF，提供了更高的压缩效率。

SVG 字体，将 SVG 用作显示文本时的字形。SVG 1.1 规范定义了一个字体规范，允许在 SVG 文档中创建字体。

EOT 字体文件，即 Embedded OpenType Fonts 文件，是微软设计的一种用于网页的嵌入式字体，它是 OpenType 字体的紧凑形式。

不同字体格式的浏览器兼容性下图所示：

不同字体格式的浏览器兼容性，截图数据来自 w3schools.com

使用 @font-face CSS 指令定义自定义字体。使用前需要把字体文件放在服务器目录，然后定义新的字体名称，并指向字体所在位置。

以京華老宋体为例，这是一款可以免费商用的中文字体。下载字体文件后，放到和 index.html 同级的目录，重命名为 jh-song.ttf。

下载字体文件

在 @font-face 指令内，使用 font-family 定义字体名称，src 属性定义字体文件路径。

定义 web 字体

然后，像使用普通字体一样，使用自定义字体样式：

使用 web 字体

完整 HTML 代码如下：

完整的 HTML 代码

浏览器显示效果如下：

web 字体显示效果

在开发者工具可以看到，上面中文字体的 ttf 文件体积高达 36.7MB。

尝试转换为 woff 格式，看看体积会有什么变化。我们在这里使用一个 Node.js 工具 ttf2woff。

ttf2woff 的自我介绍

执行命令，发现 woff 文件比 ttf 小了 11MB 左右。

转换字体文件格式

@font-face 指令的 src 属性支持多个字体格式，浏览器会根据自身支持情况，从前往后挨个匹配，最终渲染的字体是首个命中的字体。因此，一般把新字体放前面，旧字体放后面兜底。

使用多个字体文件格式

此时，浏览器会下载 .woff 文件：

浏览器自动识别下载 woff 字体

24MB 的字体依然不小，如果希望继续优化字体大小，可以使用百度前端团队出品的 fontmin 工具。它的原理是只提取用到的字符信息，重新生成新的字体文件。

Fontmin 自我介绍

Fontmin 的例子

• CSS Web Fonts，https://www.w3schools.com/css/css3_fonts.asp
• @font-face，https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face
• The Web Open Font Format (WOFF), https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_fonts/WOFF
• Tracking the History of CSS Fonts，https://css-tricks.com/tracing-history-css-fonts/，by Robin Rendle, 2017-05-11
• 京華老宋体（已更新2.0），https://zhuanlan.zhihu.com/p/637491623，特里王，2024-04-07
• Converting TTF fonts to WOFF2 (and WOFF)，https://dev.to/benjaminblack/converting-ttf-fonts-to-woff2-and-woff-3f5b，by Benjamin Black, 2018-09-11
• fontello/ttf2woff, https://github.com/fontello/ttf2woff
• ecomefe/fontmin，https://github.com/ecomfe/fontmin

完

html开发笔记08- 字体样式与颜色（标签的属性）

双标签：就是成对出现的，类似于这种 <html> </html>

单标签：就是可以单个使用的，类似于 <br> 换行标签 或 <hr>水平线标签。

标签的属性是用来定义文字或字符的 颜色、宽高、粗细、大小、等，这个是标签属性的作用。

1、每一个标签都有自己的属性，单标签和双标签都有。

2、一个标签可以有多个属性。

3、每个属性都有对应的值，值要用单或双引号引起来。

4、多个属性之间使用空格隔开。

5、属性没有顺序之分。

6、字体属性值，必须是系统可以识别的字体，一般为系统自带字体。

7、HTML5 中 font 属性已经弃用。

源代码：↓

<!DOCTYPE html>

<html lang=\”en\”>

<head>

<meta charset=\”UTF-8\”>

<!–网页抬头–>

<title>中央气象局</title>

</head>

<body>

<!–水平线的宽度是500像素，这个width就是标签属性–>

<hr width=\”500\”>

<!–下面这个是多个标签属性，多个属性之间用空格隔开–>

<font color=\”red\” face=\”黑体\” size=\”7\”>标签属性</font>

</body>

</html>

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com