如何在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屋！