193

我看到一些新网站在他们的网站上使用自定义字体（除了常规的 Arial、Tahoma 等）。

他们支持大量的浏览器。

如何做到这一点？如果可能的话，同时还阻止人们免费下载字体。

4

8 回答 8

395

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

@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，所有这些都不是很实用。

我希望这有帮助！

于 2012-08-27T14:39:58.143 回答
33

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

@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'); 
}

取自这里。

于 2013-06-18T02:44:06.867 回答
26

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

Fe 我在我的 Web 应用程序中使用Yanone Kaffeesatz字体。

我通过加载和使用它

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

在我的样式表中。

于 2012-08-27T14:33:02.497 回答
15

如今，网络上使用了四种字体容器格式：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;
  }
于 2017-04-12T10:03:51.620 回答
4

还有一个有趣的工具叫做CUFON。在这个博客中有一个如何使用它的演示， 非常简单有趣。此外，它不允许人们按 ctrl+c/ctrl+v 生成的内容。

于 2012-08-27T15:51:41.980 回答
4

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

这是一个很好的教程：制作自己的字体网络字体套件

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

希望这可以帮助，

于 2012-08-27T14:34:04.510 回答
1

我正在开发 Win 8，请使用此代码。它适用于 IE 和 FF、Opera 等。我的理解是：woff 字体在 Google 字体中很常见。

转到此处将您的 ttf 字体转换为 woff 之前。

@font-face
{
    font-family:'Open Sans';
    src:url('OpenSans-Regular.woff');
}
于 2016-03-20T08:53:34.200 回答
0

首先，你不能阻止人们下载字体，除非它是你的，而且这通常需要几个月的时间。阻止人们使用字体是没有意义的。你在网站上看到的很多字体都可以在我下面提到的免费平台上找到。

但是，如果您想在您的网站中实现字体，请阅读以下内容： 有一种非常简单且免费的方法可以在您的网站中实现字体。我会推荐 Google 字体，因为它免费且易于使用。例如，我将使用来自 Google 的 Bangers 字体。（https://fonts.google.com/specimen/Bangers?query=bangers&sidebar.open&selection.family=Bangers）这就是它的样子： HTML

<head>
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
</head>

CSS

body {
font-family: 'Bangers', cursive;
}
于 2020-04-23T18:44:32.910 回答