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

您需要使用以下命令在css中定义字体 @font-face 带着所有的重量。定义相同的 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">

如果你想使用谷歌字体,只需转到字体。谷歌。com(&A);选择字体,然后自定义

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

1. 复制链接(&P);将其粘贴到html标题部分。

2. 复制字体系列名称(&M);粘贴到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;
}

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

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

您需要定义粗体字体

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

和使用 canvasContext.font = 20px RobotoBold

您需要逐个导入。

是的,您必须导入每个tff文件,但是在某些/大多数系列字体中,常规版本仍然可以加粗,例如,您将使用普通加粗400,但如果您想要获得其他加粗变体,例如500 600 700,则需要导入字体的加粗变体