如何在html画布中使用粗体、斜体等字体文件？

我从google font下载了一些字体，其中有一些字体文件用于

粗体、斜体、浅体、细体等。让我们以
Robot
为例，这是我下载的两个字体文件：
Roboto-bold.ttf，Roboto-Regular.ttf

我想知道我应该如何使用带有
粗体
的文件？如果我选择带有以下代码的常规字体文件，会有什么区别：

canvasContext.font = `bold 20px Robot`

上述代码定义了
Robot
字体系列的
bold
。在这种情况下，是否需要为
Bold
导入
Roboto Bold.ttf
文件？对于
italic
、
light
、
thin
等，同样的问题。
您必须将文件字体链接到项目

<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>


@字体{
字体系列：“Athiti”；
字体风格：普通；
字体大小：400；
src:local（'Athiti'）、local（'Athiti-Regular'）、url（'font/Athiti-Regular.ttf'）格式（“truetype”）；
}

当您调用字体名称时

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


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

<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>


@字体{
字体系列：“Athiti”；
字体风格：普通；
字体大小：400；
src:local（'Athiti'）、local（'Athiti-Regular'）、url（'font/Athiti-Regular.ttf'）格式（“truetype”）；
}

当您调用字体名称时

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


粗体字
您需要定义粗体字体

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

并使用
canvasContext.font=20px RobotoBold

您需要逐个导入。
您需要定义粗体字体

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

并使用
canvasContext.font=20px RobotoBold

您需要逐个导入。
是的，您必须导入每个tff文件，但是在某些/大多数系列字体中，常规版本仍然可以变为粗体等，例如，您将使用正常的粗体字400，但是，如果您想要获得其他粗体变体，例如500 600 700，则需要导入字体的粗体变体
是的，您必须导入每个tff文件，但是在某些/大多数系列字体中，常规版本仍然可以设置为粗体等，例如，您将具有正常的粗体权重400，但是，如果您想获得其他粗体变体，例如500 600 700，则需要导入字体的粗体变体
您需要使用带有所有权重的
@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 */
}


您需要使用带有所有权重的
@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 */
}


如果你想使用谷歌字体，只需进入fonts.google.com并选择字体，然后自定义它

完成定制后，转到“嵌入”

复制链接并将其粘贴到html标题部分

复制字体族名称并粘贴到css文件选择器中，如下所示


如果您想使用谷歌字体，只需访问fonts.google.com并选择字体，然后对其进行自定义

完成定制后，转到“嵌入”

复制链接并将其粘贴到html标题部分

复制字体族名称并粘贴到css文件选择器中，如下所示


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