Html 如何全局连接页面上的字体？

有两种方法可以做到这一点：

• 在元标记HTML中使用链接
• 直接在CSS文件中添加字体

我有一些像这样的文件：

CRC35.otf

---

如何做到这一点？

使用.otf文件并使用此工具将其转换为其他字体格式，然后像这样将它们全部嵌入CSS文件中

@font-face {
font-family: 'CRC35';
src: url('CRC35.eot');
src: url('CRC35.eot?#iefix') format('embedded-opentype'),
    url('CRC35.woff') format('woff'),
    url('CRC35.ttf') format('truetype');
font-weight: normal;
font-style: normal;

---

}

使用.otf文件并使用此工具转换为其他字体格式，然后将它们全部嵌入CSS文件中，如下所示

@font-face {
font-family: 'CRC35';
src: url('CRC35.eot');
src: url('CRC35.eot?#iefix') format('embedded-opentype'),
    url('CRC35.woff') format('woff'),
    url('CRC35.ttf') format('truetype');
font-weight: normal;
font-style: normal;

---

}最好的方法是使用谷歌字体 您可以像这样导入it元标记（使用例如Noto Sans字体）

并将其用作

{
font-family: 'Noto Sans', sans-serif;
}

---

：）

最好的方法是使用谷歌字体 您可以像这样导入it元标记（使用例如Noto Sans字体）

并将其用作

{
font-family: 'Noto Sans', sans-serif;
}

---

：）

我需要在这里指定扩展名。otf:字体系列：“CRC35”；？不，您将通过指向字体文件的其他CSS代码使用该名称。它可以是你想要的任何东西。但是，带有扩展名的字体文件声明（src）必须指向真实的文件，并且具有指向这些文件的完整路径声明没有路径，只有要用于该字体的名称。该名称可以是任何名称，您需要它来在css的其余部分中设置该字体。例如，如果您稍后在css中使用“CRC35”名称，它应该是

body{font-family:“CRC35”；}

问题是，我将webpack用于Angular 2，当我将此fons添加到css文件时，webpack未编译，需要在此处指定扩展名。otf:font-family:“CRC35”；？不，您将通过指向字体文件的其他CSS代码使用该名称。它可以是你想要的任何东西。但是，带有扩展名的字体文件声明（src）必须指向真实的文件，并且具有指向这些文件的完整路径声明没有路径，只有要用于该字体的名称。该名称可以是任何名称，您需要它来在css的其余部分中设置该字体。例如，如果您稍后在css中使用“CRC35”名称，它应该是

body{font-family:“CRC35”；}

问题是，我将webpack用于Angular 2，而当我将此fons添加到css文件时，webpack并没有编译该名称