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

ada*_*dam 143 html css fonts webfonts

我没有使用flash或php - 我被要求将自定义字体添加到简单的HTML布局中."KG June Bug"

我在本地下载它 - 有一个简单的CSS技巧来完成这个吗?

Nic*_*zyk 257

是的,您可以使用名为@ 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');}
Run Code Online (Sandbox Code Playgroud)

然后,您可以像其他标准字体一样引用它:

 h3 { font-family: Delicious, sans-serif; }
Run Code Online (Sandbox Code Playgroud)

那么,在这种情况下,

<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>
Run Code Online (Sandbox Code Playgroud)

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

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

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

  • `url` 中指定的 @Black 路径是相对于您的 _css_ 文件所在位置的。 (3认同)

nhe*_*ich 16

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

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

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

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

如果你不想使用font-face,cufon也会工作,并且它在网站上有很好的文档:


Joh*_*ers 14

为了获得最佳浏览器支持,您的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;
}
Run Code Online (Sandbox Code Playgroud)

欲了解更多信息,请参阅文章使用@字体面CSS-tricks.com.


小智 7

试试这个

@font-face {  
    src: url(fonts/Market_vilis.ttf) format("truetype");
}
div.FontMarket { 
    font-family:  Market Deco;
}
Run Code Online (Sandbox Code Playgroud)
 <div class="FontMarket">KhonKaen Market</div>
Run Code Online (Sandbox Code Playgroud)

vilis.org


小智 5

如果您使用的是外部样式表,则代码可能如下所示:

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

并且应该保存在一个单独的.css 文件中(例如styles.css)。如果您的 .css 文件位于与页面代码不同的位置,则实际字体文件应与 .css 文件具有相同的路径,而不是 .html 或 .php 网页文件。然后网页需要类似的东西:

<link rel="stylesheet" href="css/styles.css">
Run Code Online (Sandbox Code Playgroud)

在 html 页面的 <head> 部分。在此示例中,字体文件应与样式表一起位于 css 文件夹中。在此之后,只需在 html 的任何标记中添加 class="junebug" 即可在该元素中使用 Junebug 字体。

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

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

实际的元素样式可以包含在上面,<style>并按类或 id 为每个元素调用,或者您可以只声明与元素内联的样式。我所说的元素是指 <div>、<p>、<h1> 或 html 中需要使用 Junebug 字体的任何其他元素。使用这两个选项,字体文件 (Junebug.ttf) 应位于与 html 页面相同的路径中。在这两个选项中,最佳实践如下所示:

<style>
    @font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
    .junebug { font-family: Junebug; font-size: 4.2em; }
</style>
Run Code Online (Sandbox Code Playgroud)

<h1 class="junebug">This is Junebug</h1>
Run Code Online (Sandbox Code Playgroud)

最不可接受的方式是:

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

<h1 style="font-family: Junebug;">This is Junebug</h1>
Run Code Online (Sandbox Code Playgroud)

使用内联样式不好的原因是最佳实践要求样式应该保存在一个地方,这样编辑才实用。这也是我推荐使用外部样式表的第一个选项的主要原因。我希望这有帮助。