前端必知必会-CSS 字体Font(下)

编程岁月

于 2024-08-16 09:00:00 发布

阅读量362

点赞数 6

文章标签：前端 css tensorflow

本文链接：https://blog.csdn.net/qq_24018193/article/details/141060206

版权

文章目录

CSS font-style
字体粗细
字体变体
CSS 字体大小
CSS 字体搭配
CSS 字体属性缩写
总结

CSS font-style

font-style 属性主要用于指定斜体文本。

此属性有三个值：

normal - 文本正常显示
italic - 文本以斜体显示
oblique - 文本“倾斜”（oblique 与斜体非常相似，但支持较少）

示例

p.normal {
font-style: normal;
}

p.italic {
font-style: italic;
}

p.oblique {
font-style: oblique;
}

字体粗细

font-weight 属性指定字体的粗细：

示例

p.normal {
font-weight: normal;
}

p.thick {
font-weight: bold;
}

字体变体

font-variant 属性指定文本是否应以小型大写字体显示。

在小型大写字体中，所有小写字母都会转换为大写字母。但是，转换后的大写字母的字体大小比文本中原来的大写字母要小。

示例

p.normal {
font-variant: normal;
}

p.small {
font-variant: small-caps;
}

CSS 字体大小

font-size 属性设置文本的大小。

在网页设计中，能够管理文本大小非常重要。但是，您不应使用字体大小调整来使段落看起来像标题，或使标题看起来像段落。

始终使用正确的 HTML 标签，例如标题使用

-

，段落使用
。

font-size 值可以是绝对大小或相对大小。

绝对大小：

将文本设置为指定大小
不允许用户在所有浏览器中更改文本大小（不利于可访问性）
当知道输出的物理大小时，绝对大小很有用
相对大小：

设置相对于周围元素的大小
允许用户在浏览器中更改文本大小
注意：如果您未指定字体大小，则普通文本（如段落）的默认大小为 16px（16px=1em）。

使用像素设置字体大小
使用像素设置文本大小可让您完全控制文本大小：

示例

h1 {
font-size: 40px;
}

h2 {
font-size: 30px;
}

p {
font-size: 14px;
}

提示：如果使用像素，您仍然可以使用缩放工具调整整个页面的大小。

使用 Em 设置字体大小
为了允许用户调整文本大小（在浏览器菜单中），许多开发人员使用 em 而不是像素。

1em 等于当前字体大小。浏览器中的默认文本大小为 16px。因此，1em 的默认大小为 16px。

可以使用以下公式从像素到 em 计算大小：像素/16=em

示例

h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}

h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}

p {
font-size: 0.875em; /* 14px/16=0.875em */
}

在上面的例子中，em 单位的文本大小与前一个像素单位的例子相同。但是，使用 em 单位，可以在所有浏览器中调整文本大小。

不幸的是，旧版本的 Internet Explorer 仍然存在问题。文本变大时会变得比应有的更大，变小时会变得比应有的更小。

使用百分比和 em 的组合
适用于所有浏览器的解决方案是为 <body> 元素设置百分比的默认字体大小：

示例

body {
font-size: 100%;
}

h1 {
font-size: 2.5em;
}

h2 {
font-size: 1.875em;
}

p {
font-size: 0.875em;
}

响应式字体大小
文本大小可以用 vw 单位设置，这意味着“视口宽度”。

这样，文本大小将遵循浏览器窗口的大小：

示例

<h1 style="font-size:10vw">Hello World</h1>

视口是浏览器窗口大小。1vw = 视口宽度的 1%。如果视口宽度为 50 厘米，则 1vw 为 0.5 厘米。

CSS 字体搭配

出色的字体搭配是出色的设计必不可少的。

字体搭配规则
以下是创建出色字体搭配的一些基本规则：

互补
找到可以相互补充的字体搭配总是安全的。

出色的字体组合应该协调一致，但不能太相似或太不同。

使用字体超系列
字体超系列是一组旨在很好地协同工作的字体。因此，在同一个超系列中使用不同的字体是安全的。

例如，Lucida 超系列包含以下字体：Lucida Sans、Lucida Serif、Lucida Typewriter Sans、Lucida Typewriter Serif 和 Lucida Math。

对比为王
两种太相似的字体通常会发生冲突。但是，以正确的方式进行对比可以使每种字体发挥出最佳效果。

示例：将衬线字体与无衬线字体相结合是一种众所周知的组合。

强大的超系列包括同一种字体的衬线和无衬线变体（例如 Lucida 和 Lucida Sans）。

只选择一个主字体
一种字体应该是主字体。这为页面上的字体建立了层次结构。这可以通过改变大小、粗细和颜色来实现。

CSS 字体属性缩写

CSS 字体属性
为了缩短代码，也可以在一个属性中指定所有单独的字体属性。

字体属性是以下属性的简写属性：

font-style
font-variant
font-weight
font-size/line-height
font-family
注意：字体大小和字体系列值是必需的。如果缺少其他值之一，则使用其默认值。

示例
使用字体在一个声明中设置多个字体属性：

p.a {
  font: 20px Arial, sans-serif;
}

p.b {
  font: italic small-caps bold 12px/30px Georgia, serif;
}

总结

本文介绍了的CSS 字体Font(下)使用，如有问题欢迎私信和评论