Question

我找到了最漂亮的字体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）

Answer 1

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

Answer 2

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

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

div {
font-family: myFirstFont;
}

Answer 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/。

Answer 4

使用font-face。

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

然后你可以像调用其他字体一样调用它。

Answer 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;
}

如何在CSS中使用自定义字体？

5 个答案: