如何在HTML网站上安装自定义字体

Question

如何在HTML网站上安装自定义字体

htmlcssfontswebfontscustom-font

198

我没有使用Flash或PHP，但被要求在一个简单的HTML布局中添加自定义字体"KG June Bug"。

我已经将它下载到本地 - 是否有一种简单的CSS技巧来完成这个任务？

- adam

1

警告：字体通常受版权保护。在将它们分发到您的网站之前，请确保您拥有许可证。 - Quentin

6个回答

19

在大多数现代浏览器中，您可以使用@font-face。

关于其工作原理，以下是一些文章：

这里有一种不错的语法，可用于将字体添加到您的应用程序中：

http://www.fontspring.com/blog/further-hardening-of-the-bulletproof-syntax

以下是几个转换字体以用于@font-face的网站：

如果您不想使用font-face，则cufon也可以使用，并且其网站上有良好的文档：

http://cufon.shoqolate.com/generate/

- nheinrich

18

为了获得最佳的浏览器支持，你的CSS代码应该像这样:

@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 */
}

body {
  font-family: 'MyWebFont', Fallback, sans-serif;
}

更多信息请查看文章使用@font-face在CSS-tricks.com。

- John Slegers

12

试试这个

@font-face {  
    src: url(fonts/Market_vilis.ttf) format("truetype");
}
div.FontMarket { 
    font-family:  Market Deco;
}

 <div class="FontMarket">KhonKaen Market</div>

vilis.org

- SIAMWEBSITE

11

如果您正在使用外部样式表，代码可能如下所示：

If you are using an external style sheet, the code could look something like this:

@font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
.junebug { font-family: Junebug; font-size: 4.2em; }

应该保存在一个单独的.css文件中（例如styles.css）。如果你的.css文件与页面代码不在同一位置，实际的字体文件路径应与.css文件相同，而不是.html或.php网页文件。然后网页需要类似于以下内容：

<link rel="stylesheet" href="css/styles.css">

在您的HTML页面的<head>部分中。在此示例中，字体文件应与样式表一起位于css文件夹中。之后，只需在HTML中的任何标记中添加class="junebug"，即可在该元素中使用Junebug字体。

如果您将CSS放在实际网页中，请在HTML的头部添加style标签，如下所示：

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
</style>

实际的元素样式可以包含在上述的<style>中，并按类或ID对每个元素进行调用；或者您可以将样式与元素内联声明。这里的元素指的是html中的<div>，<p>，<h1>或其他需要使用Junebug字体的元素。无论选择哪种方法，字体文件（Junebug.ttf）都应该放在与html页面相同的路径下。在这两个选项中，最佳做法如下：

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
    .junebug { font-family: Junebug; font-size: 4.2em; }
</style>

和

<h1 class="junebug">This is Junebug</h1>

而最不可接受的方式是：

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
</style>

和

<h1 style="font-family: Junebug;">This is Junebug</h1>

不建议使用内联样式的原因是最佳实践要求将样式集中在一个位置以便于编辑。这也是我建议使用外部样式表的主要原因。希望这能帮到你。

- Richard Stitz

-1

有一个简单的方法来实现这个：在 HTML 文件中添加：

<link rel="stylesheet" href="fonts/vermin_vibes.ttf" />

注意：您需要输入您所拥有的.ttf文件的名称。然后，进入您的CSS文件并添加以下内容：

h1 {
    color: blue;
    font-family: vermin vibes;
}

注意：请填入您所拥有字体的字体族名称。

注意：不要将字体族名称写成您的字体.ttf文件名，例如：如果您的字体.ttf文件名是“vermin_vibes.ttf”，则您的字体族名称应为：“vermin vibes”，字体族名称不包含特殊字符如“-”、“_”等，只能包含空格。

- Abbass Sharara

1

你应该在CSS中将其定义为“font-face”，而不是要求ttf文件。 - Arcath

我通常有两种方法来做这件事，两种都可以。 - Abbass Sharara

3

为什么使用font-face更好？ - Antonio

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nicolas Modrzyk · Accepted Answer

是的，你可以使用CSS中的@font-face特性。它虽然只在CSS3中正式批准，但在CSS2中已被提出和实现，并且在IE中得到了支持。

你可以在CSS中如下声明：

 @font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); } 
 @font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}

然后，您可以像其他标准字体一样引用它：

 h3 { font-family: Delicious, sans-serif; }

所以，在这种情况下，

<html>
   <head>
    <style>
      @font-face { font-family: JuneBug; src: url('JUNEBUG.TTF'); } 
      h1 {
         font-family: JuneBug
      }
    </style>
   </head>
   <body>
      <h1>Hey, June</h1>
   </body>
</html>

你只需要将JUNEBUG.TFF字体文件放在与HTML文件相同的位置即可。

我从dafont.com网站下载了这个字体：

http://www.dafont.com/junebug.font