参考地址:css怎么引入外部字体
WHAT
在CSS中通过使用@font-face
标签,可以将服务器端的字体下载到用户本机。
WHY
在展现网页时,有时会用特殊字体来进行个性表达,通常是设计师做好图片,再由我们前台工程师放到网页中。如果干活的只有你老哥一个,没有设计师给你设计图片,就退而求其次,通过font-family
样式引用特殊字体。
不过这有一个前提,就是引用的字体都要先在本机安装好。比如我给标题设置的是微软雅黑字体,用户机子上如果装了微软雅黑字体就能正常显示,那我要是给标题设置的是方正郑文公碑楷书体呢?这种情况下只有用户机子上安装了此种字体才能正常显示。可我们怎么能确保每个用户的机子上都安装过我们页面需要的各种字体呢?
此时,就可以使用@font-face
标签,从服务器上把字体包下载到本机。
HOW
在css中使用@font-face
标签:
/*字体后缀和浏览器有关,如下所示* .TTF或.OTF,适用于Firefox 3.5、Safari、Opera* .EOT,适用于Internet Explorer 4.0+* .SVG,适用于Chrome、IPhone*/@font-face {
font-family: 'qigongti';
// 启功体
src: url('../fonts/qigongti.eot');
src: url('../fonts/qigongti.eot?#iefix') format('embedded-opentype'),
url('../fonts/qigongti.woff') format('woff'),
url('../fonts/qigongti.ttf') format('truetype'),
url('../fonts/qigongti.svg') format('svg');
font-weight: normal;
}
【引用外部字体】在对应的节点上使用特殊字体:
div {
font-family: 'qigongti';
font-size: 16px;
}
推荐阅读
- CSS|【总结】(前端面试必考题 —— CSS两栏布局(最全面))
- css|40个适合初学者练习HTML和CSS的案例
- 前端-CSS篇|CSS水平垂直居中的几种方式,CSS定位
- CSS|采用官方最简单的办法搭建vite+vue+ts开发项目框架
- HTML+CSS学习|前端HTML5/HTML+CSS3/CSS学习笔记(七)
- QT|Qt实现隐藏按钮功能
- css|css 底部划线_一个非常实用的CSS小技巧,帮你应对各种场景
- Html|html+css漂亮登录页面
- JavaScript|打了BOM,来了DOM()