文章目录
一、参考
- CSS调用远程字体
二、问题描述
工作中,设计师经常为了界面优美好看,会使用一些“个性化”的字体,由于使用者的浏览器不一定会安装对应的字体,因此代码写了字体体现不出来,如果挨个去给用户安装字体也不现实。
解决办法:浏览器引入字体库,然后使用引入的字体。
三、快速入门
@font-face{font-family: SketchRockwell;/*这里是说明调用来的字体名字*/src:url('SketchRockwell.ttf');/*这里是字体文件路径*//* webpack 打包的办法 *//*
src: url("~@/widget-tools/css/fonts/HTYPE/YouSheBiaoTiHei/YouSheBiaoTiHei-2.ttf");
*/}.my_CSS3_class{font-family: SketchRockwell;/*这里设置某参数的字体值,在这里是“my_CSS3_class”调用了你刚才声明的字体值"SketchRockwell"*/font-size: 3.2em;/*这里是字体大小*/}
字体格式
- TrueType(.ttf)格式。
.ttf 字体是Windows和Mac的最常见的字体,是一种RAW格式。
- OpenType(.otf)格式
.otf字体被认为是一种原始的字体格式,其内置在TrueType的基础上,提供了更多的功能。
- Web Open Font Format(.woff)格式
.woff字体是Web字体中最佳格式,是一个TrueType的压缩版本,同时也支持原数据包的分离。
- Embedded Open Type(.eot)格式
.eot字体是IE专用字体
,可以从TrueType创建此格式字体。
- SVG(.svg)格式
.svg字体是基于SVG字体渲染的一种格式。
字体的兼容性解决办法
@font-face{font-family:"iconfont";src:url('../fonts/iconfont.eot');/* IE9*/src:url('../fonts/iconfont.eot?#iefix')format('embedded-opentype'),/* IE6-IE8 */url('../fonts/iconfont.woff')format('woff'),/* chrome、firefox */url('../fonts/iconfont.ttf')format('truetype'),/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/url('../fonts/iconfont.svg#iconfont')format('svg');/* iOS 4.1- */}/*移动端字体图标*/@font-face{font-family:"iconfont";src:url('../fonts/iconfont.eot');/*IE9*/src:url('../fonts/iconfont.eot?#iefix')format('embedded-opentype');/* IE6-IE8 */src:url('../fonts/iconfont.woff')format('woff');/*chrome、firefox*/src:url('../fonts/iconfont.ttf')format('truetype');/* chrome、firefox、opera、Safari, Android, iOS 4.2+ */src:url('../fonts/iconfont.svg#iconfont')format('svg');/* iOS 4.1- */}
版权归原作者 胖鹅68 所有, 如有侵权,请联系我们删除。