使用CSS自定义字体？_Css_Font Face

使用CSS自定义字体？

css

使用CSS自定义字体？,css,font-face,Css,Font Face,我看到一些新网站在其网站上使用自定义字体（除了常规的Arial、Tahoma等）而且它们支持大量的浏览器你是怎么做到的？同时，如果可能的话，也会阻止人们免费下载字体。您必须下载字体文件并将其加载到CSS中 F.e.我正在我的Web应用程序中使用字体我通过 @font-face { font-family: "Yanone Kaffeesatz"; src: url("../fonts/YanoneKaffeesatz-Regular.ttf"); } 在我的样式表中。如果

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

而且它们支持大量的浏览器

你是怎么做到的？同时，如果可能的话，也会阻止人们免费下载字体。

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

F.e.我正在我的Web应用程序中使用字体

我通过

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

在我的样式表中。

如果你在Google.com/webfonts或fontsquirrel.com上找不到任何你喜欢的字体，你可以用自己制作的字体制作自己的网页字体

这里有一个很好的教程：

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

希望这会有所帮助，

一般来说，您可以在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

是您的选择器）

请注意，某些字体格式并不适用于所有浏览器；您可以使用的生成器来避免过多的转换工作

您可以找到由提供的一组很好的免费web字体（还具有自动生成的CSS

@font-face

规则，因此您不必编写自己的）

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

不，不可能通过CSS嵌入自定义字体来设置文本样式，同时阻止人们下载。您需要使用图像、Flash或，所有这些都不是很实用

我希望这有帮助

还有一个有趣的工具叫做。这里有一个演示如何使用它

这真的很简单和有趣。此外，它不允许用户对生成的内容按ctrl+c/ctrl+v组合键。

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

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

摘自。

我正在处理Win8，请使用此代码。它适用于IE和FF、歌剧等。我所理解的是：woff字体在谷歌字体上很常见

之前，请转到将ttf字体转换为woff

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

如今，网络上使用了四种字体容器格式：

EOT、TTF、WOFF、

和

WOFF2。

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

EOT仅为IE
TTF拥有部分IE支持
WOFF受到最广泛的支持，但在一些较旧的浏览器中不可用
WOFF2.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;
  }

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

但如果您想在网站中使用字体，请阅读以下内容： 有一个非常简单和免费的方法来实现你的网站字体。我会推荐谷歌字体，因为它是免费且易于使用的。例如，我将使用谷歌的Bangers字体这就是它的样子： HTML

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

javascript替换，如

cufon

，等等，感谢您的详细回答。请问这种方法是否也适用于较旧的浏览器？例如。。IE8/7/6？顺便问一下，Google Webfonts上显示的所有字体是否都可以免费用于商业用途？@Don

@font-face

适用于所有合理的新浏览器，但您需要使用正确的格式；这就是为什么我建议使用自动化转换和规则生成的过程。是的，Google Webfonts可免费用于商业用途（）。@Chris在您的

@font-face

声明中省略了

字体样式：

和

字体重量：

，违反了任何标准？为了使这一点起作用，我必须在源URL和

之间添加格式（'truetype'）
。你好，克里斯。你知道如何使用这种字体吗？嗨，希特勒。请问#iefix
有什么用？而这部分字体系列：'besom'！重要信息

，

！重要信息

在

之外？
body {
font-family: 'Bangers', cursive;
}