使用CSS使用自定义字体？

7 回答

• 309

  通常，您可以在CSS中使用 @font-face 使用自定义字体 . 这是一个非常基本的例子：

  @font-face {
      font-family: 'YourFontName'; /*a name to be used later*/
      src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/
  }
  

  然后，平凡地，在特定元素上使用字体：

  .classname {
      font-family: 'YourFontName';
  }
  

  （ .classname 是你的选择器） .

  请注意，某些字体格式不适用于所有浏览器;你可以使用fontsquirrel.com的发生器来避免过多的转换 .

  您可以找到Google Fonts提供的一组很好的免费网络字体（也有自动生成的CSS @font-face 规则，因此您不必自己编写） .

  如果可能的话，还会阻止人们免费下载字体

  不，不可能使用CSS嵌入的自定义字体设置文本样式，同时阻止人们下载它 . 您需要使用图像，Flash或HTML5 Canvas，所有这些都不太实用 .

  我希望有所帮助！

  回复于 2024-05-02T13:32:51+08:00
• 4

  要确保您的字体与浏览器兼容，请确保使用以下语法：

  @font-face {
      font-family: 'Comfortaa Regular';
      src: url('Comfortaa.eot');
      src: local('Comfortaa Regular'), 
           local('Comfortaa'), 
           url('Comfortaa.ttf') format('truetype'),
           url('Comfortaa.svg#font') format('svg'); 
  }
  

  取自here .

  回复于 2024-05-02T13:32:51+08:00
• 22

  您必须下载字体文件并将其加载到CSS中 .

  F.E.我在我的Web应用程序中使用Yanone Kaffeesatz字体 .

  我通过加载并使用它

  @font-face {
      font-family: "Yanone Kaffeesatz";
      src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
  }
  

  在我的样式表中 .

  回复于 2024-05-02T13:32:51+08:00
• 1

  如果您没有从Google.com/webfonts或fontsquirrel.com找到任何您喜欢的字体，您可以随时使用自己制作的字体制作自己的网络字体 .

  这是一个很好的教程：Make your own font face web font kit

  虽然我不确定是否阻止某人下载你的字体 .

  希望这可以帮助，

  回复于 2024-05-02T13:32:51+08:00
• 4

  还有一个名为CUFON的有趣工具 . 有一个演示如何使用它blog它允许人们ctrl c / ctrl v生成的内容 .

  回复于 2024-05-02T13:32:51+08:00
• 25

  我正在使用Win 8，使用此代码 . 它适用于IE和FF，Opera等 . 我理解的是：woff字体在Google字体上很常见 .

  去here之前将你的ttf字体转换为woff .

  @font-face
  {
      font-family:'Open Sans';
      src:url('OpenSans-Regular.woff');
  }
  

  回复于 2024-05-02T13:32:51+08:00
• 1

  今天网上有四种字体容器格式： EOT, TTF, WOFF, 和 WOFF2.

  不幸的是，尽管选择范围很广，但没有一种通用格式适用于所有新老浏览器：

  • EOT 仅限IE，

  • TTF 有部分IE支持，

  • WOFF 享有最广泛的支持，但在某些旧版浏览器中不可用

  • WOFF 2.0支持是许多浏览器正在进行的工作 .

  如果您希望您的Web应用程序在所有浏览器中使用相同的字体，那么您可能希望在CSS中提供所有4种字体类型

  @font-face {
        font-family: 'besom'; !important
        src: url('fonts/besom/besom.eot');
        src: url('fonts/besom/besom.eot?#iefix') format('embedded-opentype'),
             url('fonts/besom/besom.woff2') format('woff2'),
             url('fonts/besom/besom.woff') format('woff'),
             url('fonts/besom/besom.ttf') format('truetype'),
             url('fonts/besom/besom.svg#besom_2regular') format('svg');
        font-weight: normal;
        font-style: normal;
    }
  

  回复于 2024-05-02T13:32:51+08:00