如何在HTML网站上安装自定义字体 [英] How do I install a custom font on an HTML site
问题描述
我没有使用flash或php - 我已被要求添加自定义字体到一个简单的HTML布局。 KG June Bug
我已将其下载到本地 - 是否有一个简单的CSS技巧来完成此操作？
是的，您可以使用名为@ 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>嘿，六月< / h1>
< / body>
< / html>
您只需要将JUNEBUG.TFF放在与html文件相同的位置。 p>
我从 dafont.com 网站下载了字体：
http://www.dafont.com/ junebug.font
I am not using flash or php - and I have been asked to add a custom font to a simple HTML layout. "KG June Bug"
I have it downloaded locally - is there a simple CSS trick to accomplish this?
Yes, you can use the CSS feature named @font-face. It has only been officially approved in CSS3, but been proposed and implemented in CSS2 and has been supported in IE for quite a long time.
You declare it in the CSS like this:
@font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
@font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}
Then, you can just reference it like the other standard fonts:
h3 { font-family: Delicious, sans-serif; }
So, in this case,
<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>
And you just need to put the JUNEBUG.TFF in the same location as the html file.
I downloaded the font from the dafont.com website:
http://www.dafont.com/junebug.font
这篇关于如何在HTML网站上安装自定义字体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
