使用 CSS 使用自定义字体？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12144000/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Using custom fonts using CSS?
提问by Radicate
I've seen some new websites that are using custom fonts on their sites (other than the regular Arial, Tahoma, etc.).
我看到一些新网站在他们的网站上使用自定义字体（除了常规的 Arial、Tahoma 等）。
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.
如何做到这一点？如果可能的话，同时还要防止人们免费下载字体。
回答by Chris
Generically, you can use a custom font using @font-facein your CSS. Here's a very basic example:
通常，您可以@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*/
}
Then, trivially, to use the font on a specific element:
然后，简单地在特定元素上使用字体：
.classname {
font-family: 'YourFontName';
}
(.classnameis your selector).
（.classname是您的选择器）。
Note that certain font-formats don't work on all browsers; you can use fontsquirrel.com's generator to avoid too much effort converting.
请注意，某些字体格式不适用于所有浏览器；您可以使用fontsquirrel.com的生成器来避免过多的转换工作。
You can find a nice set of free web-fonts provided by Google Fonts(also has auto-generated CSS @font-facerules, so you don't have to write your own).
您可以找到一组由Google Fonts提供的不错的免费网络字体（还有自动生成的 CSS@font-face规则，因此您不必自己编写）。
while also preventing people from having free access to download the font, if possible
如果可能的话，同时还要防止人们免费下载字体
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 嵌入的自定义字体设置文本样式，同时防止人们下载它。您需要使用图像、Flash 或HTML5 Canvas，所有这些都不太实用。
I hope that helped!
我希望有帮助！
回答by Serj Sagan
To make sure that your font is cross-browser compatible, make sure that you use this syntax:
要确保您的字体跨浏览器兼容，请确保使用以下语法：
@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');
}
Taken from here.
取自这里。
回答by alexclooze
You have to download the font file and load it in your CSS.
您必须下载字体文件并将其加载到您的 CSS 中。
F.e. I'm using the Yanone Kaffeesatzfont in my Web Application.
Fe 我在我的 Web 应用程序中使用Yanone Kaffeesatz字体。
I load and use it via
我通过加载和使用它
@font-face {
font-family: "Yanone Kaffeesatz";
src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
}
in my stylesheet.
在我的样式表中。
回答by Hitesh Sahu
Today there are four font container formats in use on the web: EOT, TTF, WOFF,andWOFF2.
今天，有在网络上使用的四种字体容器格式：EOT, TTF, WOFF,和WOFF2.
Unfortunately, despite the wide range of choices, there isn't a single universal format that works across all old and new browsers:
不幸的是，尽管有多种选择，但没有一种通用格式适用于所有新旧浏览器：
- EOTis IE only,
- TTFhas partial IE support,
- WOFFenjoys the widest support but is not available in some older browsers
- WOFF2.0 support is a work in progress for many browsers.
- EOT仅适用于 IE，
- TTF有部分 IE 支持，
- WOFF享有最广泛的支持，但在某些较旧的浏览器中不可用
- 对于许多浏览器，WOFF2.0 支持正在进行中。
If you want your web app to have the same font across all browsers then you might want to provide all 4 font type in CSS
如果您希望您的 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;
}
回答by Eric Robinson
If you dont find any fonts that you like from Google.com/webfonts or fontsquirrel.com you can always make your own web font with a font you made.
如果您在 Google.com/webfonts 或 fontsquirrel.com 上没有找到任何您喜欢的字体，您可以随时使用您制作的字体制作自己的网络字体。
here's a nice tutorial: Make your own font face web font kit
这是一个不错的教程：制作自己的字体字体 Web 字体工具包
Although im not sure about preventing someone from downloading your font.
虽然我不确定是否可以阻止某人下载您的字体。
Hope this helps,
希望这可以帮助，
回答by sergioviniciuss
回答by Arnold
I am working on Win 8, use this code. It works for IE and FF, Opera, etc. What I understood are : woff font is light et common on Google fonts.
我正在使用 Win 8，请使用此代码。它适用于 IE 和 FF、Opera 等。我的理解是：woff 字体在 Google 字体上很常见。
Go hereto convert your ttf font to woff before.
进入这里之前，你的TTF字体转换为WOFF。
@font-face
{
font-family:'Open Sans';
src:url('OpenSans-Regular.woff');
}
回答by NotTschuschl
First of all, you can't prevent people from downloading fonts except if it is yours and that usually takes months. And it makes no sense to prevent people from using fonts. A lot of fonts that you see on websites can be found on free platforms like the one I mentioned below.
首先，你不能阻止人们下载字体，除非它是你的，而且通常需要几个月的时间。阻止人们使用字体是没有意义的。您在网站上看到的许多字体都可以在我下面提到的免费平台上找到。
But if you want to implement a font into your website read this:There is a pretty simple and free way to implement fonts into your website. I would recommend Google fonts because it is free and easy to use. For example, I'll use the Bangers font from Google.(https://fonts.google.com/specimen/Bangers?query=bangers&sidebar.open&selection.family=Bangers) This is how it would look like: HTML
但是，如果您想在您的网站中实施字体，请阅读以下内容：有一种非常简单且免费的方法可以在您的网站中实施字体。我会推荐 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
CSS
body {
font-family: 'Bangers', cursive;
}
