如何在HTML站点上安装自定义字体
我没有使用flash或php --我被要求在一个简单的HTML布局中添加自定义字体。"KG六月虫“
我已经把它下载到本地了--有没有一个简单的CSS技巧可以做到这一点？
回答 5
Stack Overflow用户
发布于 2011-11-01 10:03:02
可以，您可以使用名为@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网站下载了字体：
Stack Overflow用户
发布于 2016-09-18 15:59:54
尝尝这个
@font-face {
src: url(fonts/Market_vilis.ttf) format("truetype");
}
div.FontMarket {
font-family: Market Deco;
} <div class="FontMarket">KhonKaen Market</div>
vilis.org
Stack Overflow用户
发布于 2017-12-28 07:56:30
如果您使用的是外部样式表，代码可能如下所示：
@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放在实际的web页面中，请在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>使用内联样式不好的原因是最佳实践规定，样式应该保存在一个地方，以便编辑是实用的。这也是我推荐使用外部样式表的第一个选项的主要原因。我希望这能帮到你。
https://stackoverflow.com/questions/7961721
复制相似问题