使用CSS使用自定义字体？


Using custom fonts using CSS?

我看到一些新网站在其网站上使用自定义字体(常规Arial，Tahoma等除外)。

并且它们支持大量的浏览器。

怎么做到的？ 同时，如果可能的话，还会阻止人们自由下载字体。

相关讨论

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

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

然后，简单地在特定元素上使用字体：

1
2
3
.classname {
    font-family: 'YourFontName';
}

(.classname是您的选择器)。

请注意，某些字体格式并非在所有浏览器上都有效；您可以使用fontsquirrel.com的生成器来避免过多的工作量。

您可以找到Google字体提供的一组不错的免费网络字体(也具有自动生成的CSS @font-face规则，因此您不必自己编写)。

while also preventing people from having free access to download the font, if possible

不会，无法通过CSS嵌入自定义字体来为文本设置样式，同时阻止人们下载文本。您需要使用图像，Flash或HTML5 Canvas，但它们都不是很实用。

希望对您有所帮助！

相关讨论

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

1
2
3
4
5
6
7
8
@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');
}

从这里拍摄。

相关讨论

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

F.e.我在Web应用程序中使用Yanone Kaffeesatz字体。

我通过加载并使用它

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

在我的样式表中。

还有一个有趣的工具叫做CUFON。在此博客中有一个如何使用它的演示
这真的很简单又有趣。另外，它不允许人们按Ctrl + C / Ctrl + V生成的内容。

如果您没有从Google.com/webfonts或fontsquirrel.com找到所需的字体，则始终可以使用自己制作的字体制作自己的网络字体。

这是一个不错的教程：制作自己的字体Web字体工具包

虽然我不确定是否要阻止某人下载您的字体。

希望这可以帮助，

如今，网络上使用四种字体容器格式：EOT, TTF, WOFF,和WOFF2.

不幸的是，尽管选择范围很广，但没有一种通用格式可以在所有新旧浏览器上使用：

  • EOT仅是IE，
  • TTF有部分IE支持，
  • WOFF享有最广泛的支持，但在某些旧版浏览器中不提供
  • WOFF 2.0支持正在许多浏览器中进行。

如果您希望您的网络应用在所有浏览器中都具有相同的字体，则可能需要在CSS中提供所有4种字体类型

1
2
3
4
5
6
7
8
9
10
11
 @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;
  }
相关讨论

我正在Win 8上使用此代码。它适用于IE和FF，Opera等。
我了解的是：woff字体比较轻巧，在Google字体上很常见。

之前请先在此处将ttf字体转换为woff。

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