如何在HTML网站上安装自定义字体
我没有使用Flash或PHP – 我被要求添加一个自定义的字体到一个简单的HTML布局。 “KG六月虫”
我有它在本地下载 – 有一个简单的CSS技巧来完成这个？
是的，您可以使用名为@ font-face的CSSfunction。 它只在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网站下载了这个字体：
您可以在大多数现代浏览器中使用@ font-face。
这里有一些关于它如何工作的文章：
- http://webdesignerwall.com/general/font-face-solutions-suggestions
- http://webdesignerwall.com/tutorials/css3-font-face-design-guide
以下是将字体添加到应用程序的一个很好的语法：
这里有几个地方可以将字体转换为@ font-face使用：
- http://www.fontsquirrel.com/fontface/generator
- http://fontface.codeandmore.com/
- http://www.font2web.com/
如果你不想使用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>
有一个简单的方法来做到这一点：在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.ttf”，则您的font-family将为：“vermin vibes”字体系列不包含特殊字符作为“ – ，_”…等只能包含空格。
