在CSS中引入外部字体有以下几种方法:
1. 使用@font-face规则:
@font-face规则可以在CSS中定义自定义字体,然后以类似于使用系统字体的方式来使用它。
@font-face {
font-family: 'CustomFont';
src: url('path/to/font.ttf') format('truetype');
}
body {
font-family: 'CustomFont', sans-serif;
}
首先使用@font-face规则定义一个自定义字体,通过给font-family属性赋值来命名字体。src属性指定字体文件的路径和文件格式。然后在需要使用该字体的元素上设置font-family属性,值为定义的字体名称。
2. 使用Google Fonts:
Google Fonts是一个免费的Web字体库,提供了大量的开放源代码字体可以直接在网页中使用。可以通过在HTML文件的head标签中插入一个<link>标签来引入Google Fonts中的字体样式。
<link href="https://fonts.googleapis.com/css2?family=Font+Name&display=swap" rel="stylesheet">
在<link>标签的href属性中指定Google Fonts的样式网址,font-family参数指定要引入的字体,可以同时引入多个字体。然后在CSS中使用指定的字体名称。
3. 使用@import规则:
@import规则可以在CSS文件中引入外部CSS文件,在这个外部CSS文件中定义了需要的字体样式。
@import url('path/to/font.css');
body {
font-family: 'CustomFont', sans-serif;
}
首先使用@import规则在CSS中引入外部CSS文件,通过url属性指定外部CSS文件的路径。然后在需要使用该字体的元素上设置font-family属性,值为外部CSS文件中定义的字体名称。
以上是三种常用的在CSS中引入外部字体的方法。可以根据具体的需求和情况选择适合的方法来引入和使用字体。