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

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

我已经下载到本地-有一个简单的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>Hey, June</h1>
   </body>
</html>

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

我从dafont.com网站下载字体:

http://www.dafont.com/junebug.font

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

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

http://webdesignerwall.com/general/font-face-solutions-suggestions
http://webdesignerwall.com/tutorials/css3-font-face-design-guide

这是一个很好的语法来添加字体到你的应用程序:

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

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

http://www.fontsquirrel.com/fontface/generator
http://fontface.codeandmore.com/
http://www.font2web.com/

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

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

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

欲了解更多信息，请参阅文章使用@font-face在CSS-tricks.com。

试试这个

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

 <div class="FontMarket">KhonKaen Market</div>

vilis.org

如果您使用的是外部样式表，代码可能看起来像这样:

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

和应该保存在一个单独的。css文件(如样式。css)。如果你的。css文件是在一个独立于页面代码的位置，实际的字体文件应该有相同的路径。css文件，而不是。html或。php网页文件。然后这个网页需要这样的内容:

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

如果你把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>

使用内联样式不好的原因是最佳实践规定样式应该保存在一个地方，以便编辑是可行的。这也是我推荐使用外部样式表的第一个选项的主要原因。

有一个简单的方法:在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将是:" verminvibes "字体族不包含特殊字符"-，_"…等等，只能包含空格

相关内容

最新更新

热门标签：