html - 我应该如何在 html Canvas 中使用粗体、斜体等字体文件？

Question

我从google font下载了一些字体，里面有bold, italic, light, thin等字体文件。我们以Robot为例，这些是我下载了两个字体文件:Roboto-Bold.ttf、Roboto-Regular.ttf。

我想知道如何使用带有Bold 的文件？如果我使用以下代码选择常规字体文件有什么区别:

canvasContext.font = `bold 20px Robot`

上面的代码为 Robot 字体系列定义了 bold。在这种情况下，是否需要为 bold 导入 Roboto-Bold.ttf 文件？ italic, light, thin 等都是同样的问题

Answer 1

您需要使用 @font-face 在 css 中定义字体与所有的重量。定义相同 font-name对于所有样式，只需使用 font-weight 来区分它们如下图

@font-face {
  font-family: "Roboto";
  src: url("Roboto-Regular.ttf");
  font-weight: normal;
}

@font-face {
  font-family: "Roboto";
  src: url("Roboto-Bold.ttf");
  font-weight: bold;
}

@font-face {
  font-family: "Roboto";
  src: url("Roboto-light.ttf");
  font-weight: 300;
}

@font-face {
  font-family: "Roboto";
  src: url("Roboto-thin.ttf");
  font-weight: 100;
}

然后在你的元素中使用它，比如

element {
  font-family: Roboto;
  font-weight:100; /* for Thin */
  font-weight:300; /* for Light */
  font-weight:normal; /* for Regular */
  font-weight:bold; /* for Bold */
}

Or you can use html <link> to embed your font like

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,400i,500" rel="stylesheet">