教你用css3实现图片容器内等比缩放,教你用c3实现图片容器内等比缩放......
2023-03-16 281 CSS
css基础教程：[1]为网页使用网络字体
来源：互联网
2023-03-16 19:17:46 282
本教程为大家介绍在网页上怎么使用网络字体。
1，使用网络字体的好处是所有人看到的效果都是样的，效果统一，
2，不依赖于用户电脑上是否安装了该字体。
工具/原料
- 电脑
- 网络和互联网上提供的字体打包文件。
方法/步骤
下载所需的字体文件，解压缩到文件夹中，格式有一下几种（eot,woff,svg,ttf）
![css基础教程：[1]为网页使用网络字体](https://exp-picture.cdn.bcebos.com/cca2552c56ee7b7f34c65fc66ef4fcf5ef0d411f.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
创建css文件对字体文件进行引用。@font-face为指定自定义字体的位置，名称
![css基础教程：[1]为网页使用网络字体](https://exp-picture.cdn.bcebos.com/fdb4f00d3aceaad7cba32f51eee7340f6578b81f.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
创建html来引用配置好的css文件，对于（）来源于 svg配置文件。
![css基础教程：[1]为网页使用网络字体](https://exp-picture.cdn.bcebos.com/64a62a0f647814230171558daac2bbd6e0d0b21f.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
![css基础教程：[1]为网页使用网络字体](https://exp-picture.cdn.bcebos.com/777f3fc2bbd6e1d0a920b9d20d254193cfe8af1f.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
使用浏览器查看效果。
![css基础教程：[1]为网页使用网络字体](https://exp-picture.cdn.bcebos.com/e09173e89a618625865bed5b3b04541bd00faa1f.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
![css基础教程：[1]为网页使用网络字体](https://exp-picture.cdn.bcebos.com/d04eec260d9a310ed851ca9931b842406bfea21f.jpg?x-bce-process=image/resize,m_lfit,w_500,limit_1/format,f_auto/quality,q_80)
注意事项
- 步骤3中的（）要与svg文件中配置的相同，否则找不到该图标。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： CSS
上一篇：div+css制作导航下拉菜单 下一篇：怎么用div布局加css样式做网页
相关文章
- 详细阅读
-
怎么用div布局加css样式做网页详细阅读
怎么用div布局加css样式做网页,怎么做一个网页呢，静态页面的制作是很简单的，我们来看看怎么通过div布局 c样式来制作一个网页吧。......
2023-03-16 437 CSS
- 详细阅读
