[分享]css中引入外部字体

在CSS中，我们可以通过引入外部字体来改变网页中的文本展示效果。通过使用fontface规则，我们可以把自定义字体文件引入到网页中，让网页文字具有更多的个性化呈现。首先，我们需要准备好需要引入的字体文...

在CSS中，我们可以通过引入外部字体来改变网页中的文本展示效果。通过使用@font-face规则，我们可以把自定义字体文件引入到网页中，让网页文字具有更多的个性化呈现。
首先，我们需要准备好需要引入的字体文件，通常情况下，字体文件会以.ttf、.eot、.woff、.svg等格式存在。在HTML文件中，我们需要通过标签将字体文件引入：

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans"> 

可以使用此链接引入Google Fonts上提供的开源字体Open Sans。
当然，如果你是想引入本地的字体，也可以使用@font-face规则：

@font-face {
  font-family: "MyCustomFont";
  src: url("mycustomfont.ttf");
} 

上述代码会将本地mycustomfont.ttf字体引入，并将其命名为"MyCustomFont"。
接下来，我们可以在CSS代码中使用这些自定义字体。类似于继承CSS属性的思路，我们只需要将font-family属性设置为我们定义的自定义字体名称：

p {
  font-family: "MyCustomFont", sans-serif;
  font-size: 18px;
} 

上述代码会将自定义字体应用到所有的p标签中。如果该字体无法加载，字体会切换为默认字体，这里设置为sans-serif。
总体来说，通过CSS引入自定义字体，为我们的页面增加了更丰富的展示效果。当然，也要注意字体文件的大小和格式，尽可能选择文件大小小，兼容性好的格式。