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

Posted 2023-03-15

【中文标题】如何在 CSS 中使用自定义字体？ [复制]

【英文标题】：How to use a custom font in CSS? [duplicate]

【发布时间】：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

【参考方案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;