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

【问题标题】：How do I install a custom font on an HTML site如何在 HTML 网站上安装自定义字体
【发布时间】：2011-12-19 04:33:05
【问题描述】：

我没有使用 flash 或 php - 我被要求在简单的 HTML 布局中添加自定义字体。《KG 六月虫》

我已将其下载到本地 - 是否有简单的 CSS 技巧来完成此操作？

【问题讨论】：

【解决方案1】：

是的，您可以使用名为 @font-face 的 CSS 功能。它只是在 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

【讨论】：

对不起，如果它是“家庭作业”，如果我将这种 JUNEBUG 字体仅用于纯文本，代码会是什么样子
我不知道你能做到这一点。它也适用于其他浏览器吗？
对我不起作用，我的字体与我的 php 页面在同一个文件夹中。
url 中指定的@Black 路径相对于您的 css 文件所在的位置。

【解决方案2】：

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

这里有一些关于它如何工作的文章：

这是将字体添加到应用程序的好语法：

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

这里有几个地方可以转换字体以供@font-face 使用：

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

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

【讨论】：

【解决方案3】：

为了获得最佳的浏览器支持，您的 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;
}

有关详细信息，请参阅Using @font-faceCSS-tricks.com 上的文章。

【讨论】：

【解决方案4】：

试试这个

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

 &lt;div class="FontMarket"&gt;KhonKaen Market&lt;/div&gt;

vilis.org

【讨论】：

【解决方案5】：

有一个简单的方法可以做到这一点：在html文件中添加：

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

注意：您输入您拥有的 .ttf 文件的名称。然后转到您的 css 文件并添加：

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

注意：你把你拥有的字体的字体家族名称。

注意：不要将字体系列名称写为你的 font.ttf 名称例如：如果您的 font.ttf 名称是：“vermin_vibes.ttf”，您的字体系列将是：“vermin vibes”字体系列不包含特殊字符，如“-，_”......等它只能包含空格。

【讨论】：

你真的应该在 CSS 中将它定义为 font-face，而不是需要一个 ttf 文件。
不需要这样做，你可以简单地这样做，我总是以两种方式来做，两者都有效
@Arcath 为什么使用 font-face 更好？

【解决方案6】：

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

@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 页面的

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

如果您将 css 放在实际网页中，请在 html 的头部添加样式标记，例如：

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

并且实际的元素样式可以包含在上面的<style> 中并通过类或id 调用每个元素，或者您可以只声明与元素内联的样式。我所说的元素是指

、

或 html 中需要使用 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>

使用内联样式不好的原因是最佳实践要求样式应全部保存在一个位置，以便进行实用的编辑。这也是我推荐使用外部样式表的第一个选项的主要原因。我希望这会有所帮助。

【讨论】：

【解决方案7】：

你只需要将 JUNEBUG.TFF 放在与 html 文件相同的位置。

我从Yofonts 网站下载了字体：

【讨论】：

正如目前所写，您的答案尚不清楚。请edit 添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。你可以找到更多关于如何写好答案的信息in the help center。