CSS3自定义字体
①:首先需要下载所需字体
②:把下载字体文件放入 font文件夹里,建议font文件夹与 css 和 image文件夹平级
③:引入字体,可直接在html文件里用@font-face引入字体,分别是字体名字和路径
例:
p{
width: 200px;
height: 100px;
margin: 40px auto;
border: 1px solid black;
text-align: center;
font-family:'name' ;
(此处给引入字体起名)
}
@font-face(此处用于引用字体){
font-family:'name';(注意名字相同)
src: url(./);
...............
}
hello world
当我们引用很多字体时,可能不知道哪个具体生效,加载速度慢,第一时间加载不出来,最好做成图片,速度快。
字体图标
关于我们日常设计时需要一些图标,苦无没有素材,我们这里以阿里图标库为例。
首先引入下载好的字体图标的css文件
我们重命名iconfont
如果我们想保留彩色的图标:
/* 设置样式 */
.icon{
width: ;
height: ;
fill: currentColor;
overflow: hidden;
}
这里再提供几个别的图标网站
iconfont: https://www.iconfont.cn
iconstore:https://iconstore.co
feathericons: https://feathericons.com
Heroicons:https://heroicons.com
Remix Icon: https://remixicon.com
iconpark:https://iconpark.oceanengine.com
Flat Icon: https://www.flaticon.com
Css.gg: https://css.gg
还有很多别的网站,对这个的建议是有开源的材料就用免费的,素材多的是。