Question

这是一个普遍的问题，为什么需要特别包括某些字体粗细和样式，而没有其他。

我在网站上使用Open Sans和Roboto Mono网络字体，并在Google字体上托管，HTML头中有基本的<link href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto+Mono" rel="stylesheet">语句。正如人们所期望的那样，我不必在<link>中指定要加粗字体或斜体样式的文本。所有浏览器通常都可以处理<foo style="font-weight: bold">和<foo style="font-style: italic">并呈现这些样式更改，即使从技术上讲它是我没有包括的（相同字体的）单独字体。

但是，如果我想要<foo style="font-weight: lighter">（或<foo style="font-weight: 200">）和<foo style="font-style: oblique">，它将无法呈现：lighter看起来像normal，而{ {1}}看起来像oblique。

很明显，我知道如何使它起作用。我只是想知道两件事：

浏览器如何在没有字体的情况下“制作”字体的粗体和斜体（和粗体斜体）版本？
为什么不能“制作”更轻巧和倾斜的版本？

NB：字体是指一组特定形状的印刷符号和字符（例如：Open Sans或Roboto Mono），字体是特定样式的字体（例如：Open Sans 400斜体或Roboto Mono 200 Italic）

Answer 1

您可以在font-weight MDN page上找到问题的用户友好解释，包括：

Meaning of relative weights

   Base element    Bolder      Lighter
-----------------------------------------
        100         400         100
        200         400         100
        300         400         100
        400         700         100
        500         700         100
        600         900         400
        700         900         400
        800         900         700
        900         900         700

Common font weight mapping。

在正式规格中可以找到更多技术性文档集。当前的“候选推荐CSS字体模块”为Fonts Module Level 3，与“字体模块级别1”中的对应定义相同。

在CSS Font Module Level 4（当前工作草案）中，提出了一些值得注意的更改：

字体重量数值从using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using Shadowsocks.Controller; using Shadowsocks.Model; using System.Net; using System.Windows.Forms; namespace Shadowsocks.View { public partial class AuthForm : Form { public AuthForm(ShadowsocksController controller) { InitializeComponent(); } private void AuthForm_Load(object sender, EventArgs e) { } private void LoginButton_Click(object sender, EventArgs e) { var _config = Configuration.Load(); _config.userProfile.email = emailTextBox.Text; _config.userProfile.passwd = pwdTextBox.Text; Configuration.Save(_config); var api = new PanelAPI(); api.requestTokenCompleted += requestTokenCompleted; api.requestToken(emailTextBox.Text, pwdTextBox.Text); } private void requestTokenCompleted(Object sender, UploadStringCompletedEventArgs e) { Console.WriteLine("requestTokenCompleted"); } } }到1
可能还有其他字符串映射到特定的数值（即1000 => thin，100 => medium等）。

浏览器当前为500显示最接近400的可用字体粗细，为font-weight: normal显示最接近700的可用字体粗细。

要确保使用特定的字体粗细，您需要：

加载体重
指定元素的确切数字权重。

要从字体文件中加载多个字体粗细，请使用多个font-weight: bold声明：

@font-face

在上面的示例中，文件名并不重要。重要的是它们指向包含正确字体样式和字体粗细字形的文件。

对于Google字体，它更容易。当加载的不仅仅是默认粗细时，请在字体系列名称后加上冒号，然后将所有粗细和样式指定为逗号分隔值：

@font-face {
  font-family: 'MyWebFont';
  src: url('myfont-normal.woff2') format('woff2'),
     url('myfont-normal.woff') format('woff'),
     url('myfont-normal.ttf') format('truetype');
}
@font-face {
  font-family: 'MyWebFont';
  src: url('myfont-bold.woff2') format('woff2'),
     url('myfont-bold.woff') format('woff'),
     url('myfont-bold.ttf') format('truetype');
  font-weight: bold;
}
@font-face {
  font-family: 'MyWebFont';
  src: url('myfont-italic.woff2') format('woff2'),
     url('myfont-italic.woff') format('woff'),
     url('myfont-italic.ttf') format('truetype');
  font-style: italic;
}
@font-face {
  font-family: 'MyWebFont';
  src: url('myfont-bold-italic.woff2') format('woff2'),
     url('myfont-bold-italic.woff') format('woff'),
     url('myfont-bold-italic.ttf') format('truetype');
  font-weight: bold;
  font-style: italic;
}

除了<link href="https://fonts.googleapis.com/css?family=MyFamily:n,i,b,bi" rel="stylesheet">（n），normal（bi）之外，您还可以加载数字值：bolditalic，400。

要了解有关如何从Google加载相同字体系列的多个粗细，样式和子集的更多信息，请阅读其"Getting started"页面。

请注意必需的字体样式，粗细和子集必须可用才能使用。如果您请求的内容不存在，Google将从可用的权重/样式/子集中返回与您的请求最接近的匹配项。
您可以轻松地在每个字体页面上看到可用粗细，样式和子集的列表，并通过选中相应的复选框为您生成正确的URL。

如何呈现不同样式和重量的网络字体？

1 个答案: