搜索
阅读量：
收藏数：
点赞数：CSS 字体大小
字体大小
font-size: 该属性设置文本的大小。
能够管理文本大小在网页设计中很重要。但是，您 不应使用字体大小调整来使段落看起来像标题，或者标题看起来像段落。
始终使用正确的 HTML 标记，例如 <h1> - <h6> 用于标题，<p> 用于段落。
font-size 值可以是 绝对大小或相对大小。
绝对尺寸：
- 将文本设置为指定大小
- 不允许用户更改所有浏览器中的文本大小（出于辅助功能原因而不好）
- 当输出的物理大小已知时，绝对大小很有用
相对尺寸：
- 设置相对于周围元素的大小
- 允许用户在浏览器中更改文本大小
注意：如果未指定字体大小，则普通文本（如段落）的默认大小为 16px （16px=1em）。
使用像素设置字体大小
使用像素设置文本大小可以完全控制文本大小：
1 | h1 { font-size: 40px;} |
提示： 如果使用像素，您仍然可以使用缩放工具调整整个页面的大小。
使用 em 设置字体大小
要允许用户调整文本大小（在浏览器菜单中），许多 开发人员使用 em 而不是 pixel。
1em 等于当前字体大小。浏览器中的默认文本大小为 16px。 因此，1em 的默认大小为 16px。
可以使用以下公式计算从像素到em的大小：pixels/16=em
1 | h1 { font-size: 2.5em; /* 40px/16=2.5em */} |
在上面的示例中，em 中的文本大小与上一个示例相同 以像素为单位。但是，使用 em 大小，可以调整文本大小 在所有浏览器中。
不幸的是，旧版本仍然存在问题 Internet Explorer 的格式。 文本变得比应有的大 当变大时，当它变小时，它应该比它应该变小时要小。
使用 percent 和 em 的组合
适用于所有浏览器的解决方案是在 <body> 元素的百分比：
1 | body { font-size: 100%;} |
我们的代码现在运行良好！它显示相同的文本大小所有浏览器，并允许所有浏览器缩放或调整文本大小！
响应式字体大小
vw: 文本大小可以用单位设置，即“视口宽度”。
这样，文本大小将遵循浏览器窗口的大小：
1 | <h1 style="**font-size:10vw**">Hello World</h1> |
Viewport 是浏览器窗口大小。1vw = 视口宽度的 1%。如果视口宽 50 厘米，则 1vw 为 0.5 厘米。
0评论