使用CSS使用自定义字体？

Question

我见过一些在他们网站上使用自定义字体的新网站(除常规Arial,Tahoma等外).

它们支持大量的浏览器.

怎么做到这一点？同时也阻止人们免费下载字体,如果可能的话.

Answer 1

通常,您可以@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字体提供的一组很好的免费网络字体(也有自动生成的CSS @font-face规则,因此您不必自己编写).

同时也阻止人们免费下载字体,如果可能的话

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

我希望有所帮助!

Answer 2

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

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

取自这里.

Answer 3

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

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

我通过加载并使用它

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

在我的样式表中.

Answer 4

今天，有在网络上使用的四种字体容器格式：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;
  }