ChatGPT解决这个技术问题 Extra ChatGPT

使用 CSS 使用自定义字体?

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

他们支持大量的浏览器。

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

cufon 这样的 javascript 替换

S
Stephen Ostermiller

通常,您可以在 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,所有这些都不是很实用。


感谢您提供非常详细的答案。请问这种方法是否也适用于旧版浏览器?比如.. IE8/7/6?顺便问一下,Google Webfonts 上显示的所有字体都可以免费用于商业用途吗?
@Don @font-face 适用于所有相当新的浏览器,但您需要有正确的格式;这就是为什么我建议使用 fontsquirrel.com 来自动化转换和规则生成的过程。是的,Google Webfonts 可免费用于商业用途 (little link for more info)。
@Chris,在您的 @font-face 声明中省略 font-style:font-weight: 是否违反任何标准?
为了让它工作,我必须在源 URL 和 ; 之间添加 format('truetype')
你好克里斯。你知道如何使用这个字体吗? fontsmarket.com/font-download/gothic-821-condensed-bt
S
Serj Sagan

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

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

取自 here


a
akluth

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

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

我通过加载和使用它

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

在我的样式表中。


H
Hitesh Sahu

如今,网络上使用了四种字体容器格式: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。请问#iefix有什么用?而这部分 font-family: 'besom'; !important!important; 之外?
E
Eric Robinson

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

这是一个很好的教程:Make your own font face web font kit

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

希望这可以帮助,


s
sergioviniciuss

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


A
Arnold

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

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

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

N
NotTschuschl

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

但是,如果您想在您的网站中实现字体,请阅读以下内容:有一种非常简单且免费的方法可以在您的网站中实现字体。我会推荐 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;
}