HTML / CSS字体重量

介绍

在这个入门教程中HTML./CSS.字体粗细,我们将探索一些易于使用的创造性应用程序,以进一步增强您的网页上的文本。

什么是字体重量?

字体重量是放置在字体上的“值”,其将确定您的文本将出现的粗体或亮起。您可以使用许多“值”,可以使用它为创建最适合您想要显示文本的字体重量提供了很大的灵活性。

显示HTML字体粗细

如果您想亲自尝试,请复制代码并粘贴到一个文本编辑器,如Notepad或notepad++。我们将使字体的粗细为“bold”。

如何使文本粗体在CSS

< !DOCTYPE html >
<HTML.>
<>

<风格类型=文本/ css >

/ *样式* /

p {
颜色:红色;
粗细:大胆的;
字体:18px arial,helvetica,sans-serif;
}

风格>
头>

<身体>

<p>188bet网投Udacity是你可以了解字体重量p>

身体>
HTML.>

HTML和CSS代码相互作用的解释如下:

HTML和CSS交互显示在代码中

在你的网页上的结果是这样的。注意到胆大文本。

字体重量的标准与数值

您可以始终将传统的“粗体”值与粗体文本一起使用,但还有其他方式显示字体重量。例如,使用数值,允许更大的控制粗体强度的强度。

您需要了解使用数字值的内容

虽然实际上,在显示的文本中可以使用以下数值来定义“粗体”:100,200,300,400,500,600,700,800和900,实际结果将是由您在CSS中使用的字体决定。

并不是所有的web字体,或者“字体家族”最初都是用一系列粗体变体来构建的。大多数字体族实际上只有一些可用的权重。这意味着,当指定了一个不存在人脸的权重时,将使用一个具有附近权重的人脸。

数值如下:

  • 100 -薄
  • 200 - 额外的灯(超灯)
  • 300 - 光
  • 400 - 正常
  • 500 -中
  • 600 -半粗体(半粗体)
  • 700 - 大胆
  • 800 -超粗体(超粗体)
  • 900 - 黑色(重)

下面是一些不同字体重量值的例子:

注意:我们将使用Font-Family:Helvetica,Arial,Sans-Serif;对于这个演示。

CSS样式 Web输出
字体重量:胆大;
字体重量:正常;
字体重量:200;(比正常打火机)
字体重量:400;(“正常”一样)
字体重量:700;(与“粗体”相同)
字体重量:900;(这是最大值)

当我们继续探索所有可能性领域时,您可以通过Web字体做的是无穷无尽的。在未来的博客帖子上,我们将探讨Web的更先进的尖端区域的字体重量开发。

风格问题

用例场景

说到风格,有时你会想让你的文字突出或不那么引人注目。

当您想要在web页面中展示几乎是下意识的文字时,让您的字体文本不那么引人注目可以给您的眼睛带来愉悦的效果。

例如:

< !DOCTYPE html >
<HTML.>
<>

<风格类型=文本/ css >

/ *样式* /

p {
颜色:灰色;
字体重量:100;
字体大小:18 px;
font-family:宋体,sans-serif;
}

风格>
头>

<身体>

<p>188bet网投Udacity是你可以了解字体重量p>

身体>
HTML.>

使用数字字体重量的网络结果100.看起来像这样:

现在,如果要强调邮件的点,请使用更高的数字增强您的字体重量。

例如:

< !DOCTYPE html >
<HTML.>
<>

<风格类型=文本/ css >

/ *样式* /

p {
颜色:灰色;
字体重量:900;
字体大小:18 px;
font-family:宋体,sans-serif;
}

风格>
头>

<身体>

<p>188bet网投Udacity是你可以了解字体重量p>

身体>
HTML.>

使用数字字体重量的网络结果900看起来像这样:

使用不同的浏览器

在web创建的世界中,不同的浏览器有时会产生不同的结果。

让我们来测试这一点。我们将使用以下代码进行示例:

< !负责人html DOCTYPE html > < > < >