代码之家 › 专栏 › 技术社区 › Joey Yi Zhao

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

fonts canvas css html

Joey Yi Zhao · 技术社区 · 7 年前

我从google font下载了一些字体,其中有一些字体文件 bold, italic, light, thin 等等,让我们 Robot 例如,我下载了两个字体文件: Roboto-Bold.ttf, Roboto-Regular.ttf 。

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

canvasContext.font = `bold 20px Robot`

上述代码定义了 bold 对于 机器人 字体系列。我需要导入吗 Roboto-Bold.ttf 的文件 大胆的 在这种情况下?同样的问题 italic ,则, light ,则, thin 等

5 回复 | 直到 7 年前

Bhuwan 7 年前

您需要使用以下命令在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">

devzakir 7 年前

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

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

复制链接(&P);将其粘贴到html标题部分。
复制字体系列名称(&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;
}

MG kusrc 7 年前

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

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

Tan Duong 7 年前

您需要定义粗体字体

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

和使用 canvasContext.font = 20px RobotoBold

您需要逐个导入。

Tungamirai Mangombe 7 年前

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