如何在css中安装自定义字体 [英] How to install custom fonts in css
问题描述
我有一个文件夹中有2个自定义字体,我将其命名为Fonts,其中一个名为PlayfairDisplay-Black。我不知道如何在我正在开发的网站中使用它们?
如何使用这些字体?
@ font-face {
font-family:'MyWebFont';
src:url('WebFont.eot');
src:url('WebFont.eot?#iefix')format('embedded-opentype'),
url('WebFont.woff')格式('woff'),
url ('WebFont.ttf')格式('truetype'),
url('WebFont.svg#webfont')格式('svg');
$ b $ p
$ b 你所要做的就是链接到HTML中的样式表,像这样:
< link rel =stylesheethref =stylesheet.csstype =text / csscharset = utf-8/>
要利用新的字体,必须告诉样式表使用它们。看看上面的原始@ font-face声明,并找到名为font-family的属性。链接的名字将会是你用来引用字体的东西。将该webfont名称添加到要更改的选择器内的font-family属性的字体堆栈中。例如:
p {font-family:'MyWebFont',Arial,sans-serif; }
I have a folder with 2 custom fonts in a folder that I named Fonts and one of them is called PlayfairDisplay-Black. I do not know how to use them in the site that I am developing?
How can use these fonts?
解决方案 A special CSS @font-face declaration helps the various browsers select the appropriate font it needs without causing you a bunch of headaches.
@font-face{
font-family: 'MyWebFont';
src: url('WebFont.eot');
src: url('WebFont.eot?#iefix') format('embedded-opentype'),
url('WebFont.woff') format('woff'),
url('WebFont.ttf') format('truetype'),
url('WebFont.svg#webfont') format('svg');
}
All you have to do is link to the stylesheet in your HTML, like this:
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
To take advantage of your new fonts, you must tell your stylesheet to use them. Look at the original @font-face declaration above and find the property called "font-family." The name linked there will be what you use to reference the font. Prepend that webfont name to the font stack in the "font-family" property, inside the selector you want to change. For example:
p { font-family: 'MyWebFont', Arial, sans-serif; }
这篇关于如何在css中安装自定义字体的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!