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

我没有使用 flash 或者 php-我被要求给一个简单的 HTML 布局添加一个自定义字体。“ KG June Bug”

我已经在本地下载了它-是否有一个简单的 CSS 技巧来实现这一点（给 HTML 站点添加自定义字体）？

512531 次浏览
小开
最佳答案

是的，您可以使用名为@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

小开

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

下面是一些关于它如何工作的文章:

这里有一个很好的语法用来给你的应用程序添加字体:

下面是一些用@font-face 转换字体的地方:

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

小开

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

有关更多信息，请参见 CSS-tricks.com 上的文章 使用@font-face 。

小开

试试这个

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

vilis.org

小开

有一个简单的方法: 在 html 文件中添加:

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

注意: 您输入了. ttf 文件的名称。 然后打开你的 css 文件，添加:

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

注意: 你把字体家族名字的字体，你有。

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

小开

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

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

而且应该被保存在一个单独的。Css 文件(例如 styles.css)。如果你。Css 文件位于与页面代码分离的位置，实际的字体文件应该具有与。Css 文件，而不是。Html 或。网页文件。然后网页需要这样的东西:

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

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

如果你把 css 放在实际的网页中，在 html 的头部添加样式标签，如下:

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

实际的元素样式可以包含在上面的 <style>中，并通过类或 id 对每个元素进行调用，也可以只在元素内联中声明样式。元素指的是 < div > 、 < p > 、 < h1 > 或 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>

使用内联样式不好的原因是最佳实践要求样式应该保存在一个地方，因此编辑是可行的。这也是我推荐使用外部样式表的第一个选项的主要原因。希望这个能帮上忙。


提交答案