Question

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

我在本地下载了 - 是否有一个简单的CSS技巧可以完成此任务？

Answer 1

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

Answer 2

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

以下是一些有关其工作原理的文章：

以下是将字体添加到应用程序的良好语法：

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

以下是转换字体以供@ font-face使用的几个地方：

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

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

Answer 3

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

有关详细信息，请参阅Using @font-face上的文章CSS-tricks.com。

Answer 4

试试这个

＆＃13;

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

＆＃13;

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

＆＃13;

vilis.org

Answer 5

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

@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">

＆lt; head＆gt;中的

你的HTML页面的一部分。在此示例中，字体文件应与样式表一起位于css文件夹中。在此之后，只需添加class =＆＃34; junebug＆＃34;在html中的任何标记内部，在该元素中使用Junebug字体。

如果您将css放在实际网页中，请在html的头部添加样式标记，如：

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

实际的元素样式可以包含在上面的<style>中，也可以按类或id调用每个元素，或者您可以使用元素内联声明样式。元素是指＆lt; div＆gt;，＆lt; p＆gt;，＆lt; h1＆gt;或者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>

使用内联样式不合适的原因是最佳实践要求样式应保存在一个位置，以便编辑是实用的。这也是我建议使用外部样式表的第一个选项的主要原因。我希望这会有所帮助。

Answer 6

有一种简单的方法可以做到这一点：在html文件中添加：

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

注意：您输入了.ttf文件的名称。然后转到你的css文件并添加：

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

注意：您输入了您拥有的字体的字体系列名称。

注意：不要将font-family名称写为font.ttf名称例如：如果你的font.ttf名称是：＆＃34; vermin_vibes.ttf＆＃34;你的font-family将是：＆＃34; vermin vibes＆＃34;字体系列不包含特殊字符作为＆＃34; - ，_＆＃34; ...等它只能包含空格。

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

6 个答案: