使用 CSS 使用自定义字体? [英] Using custom fonts using CSS?

问题描述

我看到一些新网站在其网站上使用自定义字体(常规 Arial、Tahoma 等除外).

I've seen some new websites that are using custom fonts on their sites (other than the regular Arial, Tahoma, etc.).

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

And they support a nice amount of browsers.

如何做到这一点?同时也尽可能防止人们免费下载字体.

How does one do that? While also preventing people from having free access to download the font, if possible.

推荐答案

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

Generically, you can use a custom font using @font-face in your CSS. Here's a very basic example:

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

然后，简单地，在特定元素上使用字体:

Then, trivially, to use the font on a specific element:

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

(.classname 是您的选择器).

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

Note that certain font-formats don't work on all browsers; you can use fontsquirrel.com's generator to avoid too much effort converting.

您可以找到由 Google Fonts 提供的一组不错的免费网络字体(也有自动生成的 CSS @font-face 规则，因此您不必自己编写).

You can find a nice set of free web-fonts provided by Google Fonts (also has auto-generated CSS @font-face rules, so you don't have to write your own).

同时尽可能防止人们免费下载字体

while also preventing people from having free access to download the font, if possible

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

Nope, it isn't possible to style your text with a custom font embedded via CSS, while preventing people from downloading it. You need to use images, Flash, or the HTML5 Canvas, all of which aren't very practical.

希望有帮助！

这篇关于使用 CSS 使用自定义字体?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！