如何在 CSS 中使用自定义字体？ [复制]答案

【问题标题】：How to use a custom font in CSS? [duplicate]如何在 CSS 中使用自定义字体？ [复制]
【发布时间】：2018-05-12 06:39:33
【问题描述】：

我找到了最漂亮的字体here。我想用它。我尝试了以下操作：

@font-face {
    font-family: myFirstFont;
    src: url(http://fontsforweb.com/font/show/?id=78041);
}

div {
    font-family: myFirstFont;
}

（来源：https://www.w3schools.com/css/css3_fonts.asp）

【问题讨论】：

您是否阅读了该页面的“如何”部分？
您链接到的页面提供了一个您可以使用的嵌入式链接以及相关说明。你只需要注册。请参阅此页面上的“如何在您的网站上嵌入此 webfonts [原文]”：fontsforweb.com/font/show/?id=78041

标签： css

【解决方案1】：

这不是字体的来源，它只是您可以下载的网站。下载字体并放在字体文件夹中，然后将您的代码 src 更改为该路径。

【讨论】：

【解决方案2】：

下载完整的 zip 文件，解压，然后将其放入您的项目中，然后使用以下代码：

@font-face {
    font-family: myFirstFont;
    src: url(MonsieurPomme.woff);
}

div {
font-family: myFirstFont;
}

【讨论】：

【解决方案3】：

您需要下载字体文件并添加各种格式的链接，具体取决于您要支持的浏览器：

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

请参阅https://css-tricks.com/snippets/css/using-font-face/ 了解更多信息。

【讨论】：

【解决方案4】：

使用字体。

@font-face{
     font-family: ((fontName));
     src: url(fontname.woff);
}

那么你就可以像调用其他字体一样调用它了。

【讨论】：

【解决方案5】：

您需要直接链接到字体文件，而不仅仅是网页。

@font-face {
    font-family: myFont;
    src: url('font.eot'); /* IE9 Compatible Modes */
    src: url('font.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('font.woff2') format('woff2'), /* Super Modern Browsers */
         url('font.woff') format('woff'), /* Pretty Modern Browsers */
         url('font.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('font.svg#svgFontName') format('svg'); /* Legacy iOS */

}
div {
    font-family: 'myFont', serif;
}

【讨论】：