css 引入 旁门正道
时间: 2023-08-19 22:16:02 浏览: 118
要在CSS中引入字体文件,你需要进行以下步骤:
1. 首先,创建一个放置字体文件的文件夹,比如命名为"font"。
2. 将字体文件(比如"庞门正道标题体.ttf")放入该文件夹中。
3. 在CSS文件中定义字体,可以创建一个名为"font.css"的文件。
4. 在"font.css"文件中使用@font-face规则来定义字体,如下所示:
```
@font-face {
font-family: "庞门正道标题体";
src: url("../font/庞门正道标题体.ttf") format('truetype');
font-weight: normal;
font-style: normal;
}
```
这样就定义了一个名为"庞门正道标题体"的字体,并指定了字体文件的路径。
5. 在webpack的配置文件(比如"webpack.base.conf.js")中,添加对字体文件的处理规则。可以使用url-loader来处理字体文件,如下所示:
```
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('fonts/\[name\].\[hash:7\].\[ext\]')
}
}
```
这样配置后,webpack会将字体文件转换为base64编码的DataURL,并将其嵌入到生成的CSS文件中。
这样,你就可以在CSS中引入"庞门正道标题体"字体了。只需在需要使用该字体的地方,使用"font-family"属性来指定字体名称即可。
#### 引用[.reference_title]
- *1* *2* [vue项目引入三方字体](https://blog.csdn.net/sinat_37255207/article/details/109644677)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v91^control_2,239^v3^insert_chatgpt"}} ] [.reference_item]
[ .reference_list ]
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)