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

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

我已经在本地下载了它 - 是否有一个简单的 CSS 技巧可以完成此操作？

原文由 adam 发布，翻译遵循 CC BY-SA 4.0 许可协议

阅读 369

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

原文由 Nicolas Modrzyk 发布，翻译遵循 CC BY-SA 3.0 许可协议

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

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

这是将字体添加到您的应用程序的一个很好的语法：

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

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

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

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

原文由 nheinrich 发布，翻译遵循 CC BY-SA 3.0 许可协议

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

CSS如何让指定的某个Tag不显示（比如：display=none），但是还是占有位置呢？

如何实现类似豆包的AI改写框跟随内容滚动效果？

body :first-child(不是body:first-child，中间有空格)伪类选择器到底选中了什么元素？

问一个鼠标滚动事件，这种是怎么实现的？

如何在CSS中实现滚动条不溢出圆角框？

form对象根据表单dom元素的name属性获取元素对象是基于什么标准的？兼容性如何？

请问，是否可以设定Table的宽度，或者不让其超过父容器呢？

Stack Overflow 翻译