使用CSS如何使用自定义字体？

Question

使用CSS如何使用自定义字体？

cssfont-face

207

我看到一些新网站在使用自定义字体（而不是常规的 Arial、Tahoma 等字体）。

并且它们支持很多浏览器。

如何实现这一点？如果可能，同时又可以防止人们自由下载字体。

- Radicate

JavaScript替代方案，如cufon。 - t q

6

http://www.fontsquirrel.com/，http://www.google.com/webfonts/等。 - j08691

8个回答

35

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

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

取自此处。

- Serj Sagan

29

你需要下载字体文件并在CSS中加载它。

例如，我正在我的Web应用程序中使用Yanone Kaffeesatz字体。

我通过以下方式加载和使用它：

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

在我的样式表中。

- akluth

18

目前在网页上有四种字体容器格式被广泛使用：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;
  }

- Hitesh Sahu

1

嗨，Hitesh。我可以问一下 #iefix 的用途是什么吗？还有这部分 font-family: 'besom'; !important，!important 在 ; 外面？ - Blues Clues

4

如果您在Google.com/webfonts或fontsquirrel.com上找不到喜欢的字体，您可以使用自己制作的字体创建Web字体。以下是一个很好的教程：创建自己的字体Web字体包。虽然我不确定如何防止他人下载您的字体。希望这可以帮助您。

- Eric Robinson

4

还有一个有趣的工具叫做CUFON。在这篇博客中有如何使用它的演示。它非常简单而且有趣。此外，它不允许人们复制粘贴生成的内容。

- sergioviniciuss

1

我正在使用Win 8，使用此代码。它适用于IE和FF，Opera等浏览器。我的理解是：woff字体在Google字体中很常见且轻巧。

转换您的ttf字体为woff，请在这里进行。

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

- Arnold

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;
}

- NotTschuschl

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Chris · Accepted Answer

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

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

然后，轻松地，要在特定元素上使用字体：

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

(.classname是你的选择器.)

请注意，某些字体格式并不适用于所有浏览器，您可以使用fontsquirrel.com 的生成器来避免转换过程中花费太多精力。

您可以在Google Fonts上找到一组漂亮的免费网络字体（还有自动生成的CSS @font-face规则，因此您不必编写自己的规则）。

如果可能，还要防止他人以自由方式下载该字体

不，通过CSS嵌入自定义字体，并同时防止其他人下载它是不可能的。您需要使用图像、Flash或HTML5 Canvas，但这些方法都不是非常实用。