我应该如何在 html 画布中使用粗体、斜体等字体文件？答案

【问题标题】：How should I use font file for bold, italic, etc in html canvas?我应该如何在 html 画布中使用粗体、斜体等字体文件？
【发布时间】：2018-09-13 12:34:46
【问题描述】：

我从google字体下载了一些字体，还有一些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 等也有同样的问题。

【问题讨论】：

标签： html css canvas fonts

【解决方案1】：

您必须将文件字体链接到您的项目

<style>
        @font-face {
            font-family: 'Athiti';
            font-style: normal;
            font-weight: 400;
            src: local('Athiti'), local('Athiti-Regular'), url('fonts/Athiti-Regular.ttf') format("truetype");
        }
</style>

当你调用字体名称时

 <div class="container" style="font-family: 'Athiti' font-size: 16px; ">
<b> Font Bold </b>
</dib>

【讨论】：

【解决方案2】：

你需要定义粗体字

@font-face {
    font-family: 'RobotoBold';
    src: url('./Roboto-Bold.ttf');
}

并使用canvasContext.font = 20px RobotoBold

你需要一个一个地导入。

【讨论】：

【解决方案3】：

是的，您必须导入每个 tff 文件，但是常规版本仍然可以在某些/大多数系列字体中变为粗体等，例如，您将拥有正常的粗体重量 400，但如果您想获得其他粗体变体例如 500 600 700 您需要导入字体的粗体变体

【讨论】：

【解决方案4】：

您需要使用 @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">

【讨论】：

有些字体文件没有*-bold, *-light。如何在它们上应用粗体、浅色的样式？
@ZhaoYi 你不能......你将需要他们的字体文件（.ttf）具有粗体和浅色风格......

【解决方案5】：

如果您想使用 google 字体，只需转到 fonts.google.com 并选择字体然后自定义它

完成自定义后，转到“嵌入”

复制链接并将其粘贴到您的 html 头部部分。
复制字体系列名称并粘贴到您的 css 文件选择器中，如下所示。

canvas {
 font-family: 'Roboto', sans-serif;
 font-weight: thin/normal/bold/bolder; // Choose any option
 font-style: normal/italic/oblique;  // Choose any option
 font-size: 20px;
}

【讨论】：