番禺网站建设公司,互动平台论坛,wordpress 替代 php,成都网站建设多少钱CSS3自定义字体
①#xff1a;首先需要下载所需字体
②#xff1a;把下载字体文件放入 font文件夹里#xff0c;建议font文件夹与 css 和 image文件夹平级 ③#xff1a;引入字体#xff0c;可直接在html文件里用font-face引入字体#xff0c;分别是字体名字和路径
例…CSS3自定义字体
①首先需要下载所需字体
②把下载字体文件放入 font文件夹里建议font文件夹与 css 和 image文件夹平级 ③引入字体可直接在html文件里用font-face引入字体分别是字体名字和路径
例:
style 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(./); ............... } /style
/head
body phello world/p /body 当我们引用很多字体时可能不知道哪个具体生效加载速度慢第一时间加载不出来最好做成图片速度快。
字体图标
关于我们日常设计时需要一些图标苦无没有素材我们这里以阿里图标库为例。
首先引入下载好的字体图标的css文件
我们重命名iconfont
head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title/title link relstylesheet href./......
/head
body span classiconfont (后面这里是在阿里图标库font class中复制的代码)/span /body
如果我们想保留彩色的图标:
head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titlejingdong边侧栏练习/title !-- 引入css和js样式 -- link relstylesheet href./iconfont/iconfont.css script src./ionFont/ionFont.js/script style /* 设置样式 */ .icon{ width: ; height: ; fill: currentColor; overflow: hidden; } /style /head body !-- 照着写就行主要use标签注意#后为引入图标名称 -- svg classicon aria-hiddentrue use xlink:href#(阿里图标库中fontclass复制的代码注意要先下载到本地)/use /svg /body
这里再提供几个别的图标网站
iconfont: https://www.iconfont.cn iconstorehttps://iconstore.co feathericons: https://feathericons.com Heroiconshttps://heroicons.com Remix Icon https://remixicon.com iconpark:https://iconpark.oceanengine.com Flat Icon https://www.flaticon.com Css.gg https://css.gg 还有很多别的网站对这个的建议是有开源的材料就用免费的素材多的是。
