Fatal编程技术网
  • html/
  • 如何在HTML站点上安装自定义字体

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

html css fonts

如何在HTML站点上安装自定义字体,html,css,fonts,webfonts,Html,Css,Fonts,Webfonts,我没有使用flash或php，我被要求在简单的HTML布局中添加自定义字体。“六月虫” 我在本地下载了它-有没有简单的CSS技巧来实现这一点？是的，您可以使用名为@font-face的CSS功能。 它只在CSS3中得到正式批准，但在CSS2中被提出和实施，并且在IE中得到了很长时间的支持 在CSS中声明如下： @font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); } @font-face { font-f

我没有使用flash或php，我被要求在简单的HTML布局中添加自定义字体。“六月虫”

我在本地下载了它-有没有简单的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');}

@font-face { font-family: Junebug; src: url('Junebug.ttf'); } 
.junebug { font-family: Junebug; font-size: 4.2em; }
然后，您可以像其他标准字体一样引用它：

 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>


@字体面{font-family:JuneBug；src:url（'JuneBug.TTF'）；}
h1{
字体系列：JuneBug
}
嗨，琼
您只需要将JUNEBUG.TFF放在与html文件相同的位置

我从网站下载了字体：

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

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

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

这里有几个地方可以转换字体以与@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;
}
有关更多信息，请参阅。

上的文章，试试这个

@font-face{
src:url（字体/Market_vilis.ttf）格式（“truetype”）；
}
丰特市场分部{
字体系列：市场装饰；
}
KhonKaen市场
有一种简单的方法可以做到这一点： 在html文件中添加：

<link rel="stylesheet" href="fonts/vermin_vibes.ttf" />
注意：您输入了您拥有的字体的字体系列名称

注意：不要将字体系列名称作为font.ttf名称写入
示例：如果您的font.ttf名称是：“害虫”vibes.ttf，则您的字体系列将是：“害虫”字体系列不包含“-、bes”等特殊字符，它只能包含空格。

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

 @font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); } 
 @font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf');}

@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">
在html页面的部分中。在本例中，字体文件应与样式表一起位于css文件夹中。在此之后，只需在html中的任何标记中添加class=“junebug”，即可在该元素中使用junebug字体

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

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


@字体面{font-family:Junebug；src:url（'Junebug.ttf'）；}
实际的元素样式可以包含在上面的
中，并按类或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>


@字体面{font-family:Junebug；src:url（'Junebug.ttf'）；}
.junebug{字体系列：junebug；字体大小：4.2em；}
及

这里是Junebug
最不可接受的方式是：

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


@字体面{font-family:Junebug；src:url（'Junebug.ttf'）；}
及

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

如果这是“家庭作业”，那么很抱歉，如果我仅将JUNEBUG字体用于普通文本，代码会是什么样子？我不知道你可以这样做。它在其他浏览器中也适用吗？对我来说不适用，我的字体和我的php页面在同一个文件夹中。@在
url
中指定的黑色路径与css文件所在的位置有关。你应该在css中将其定义为
font-face
，而不需要ttf文件。不需要这样做，你可以像这样做。我总是用两种方式来做，而且两种方式都有works@Arcath为什么更好使用字体？ 
<h1 style="font-family: Junebug;">This is Junebug</h1>