CSS引入外部字体方法,附可用demo
有时候我们做的页面需要用到一些更好看的字体
又不想用图片代替,图片会影响加载速度
则使用外部字体来显示
但是直接通过font-family又不一定全部都行
这就需要我们在css中进行定义并且引入字体文件路径
然后再使用外部字体
直接上代码:
font.html
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS引用外部字体</title> <link rel="stylesheet" type="text/css" href="font.css"> </head> <body> <h1>里客云资源站</h1> <h2>www.likeyunba.com</h2> </body> </html>
font.css
@font-face { font-family: 'fontnameRegular'; src: url('fontname.eot'); src: local('fontname Regular'), local('fontname'), url('fontname.woff') format('woff'), url('fontname.ttf') format('truetype'), url('fontname.svg#fontname') format('svg'); } /*其中fontName替换为你的字体名称*/ h1{font-family: fontnameRegular}
字体文件下载:
https://pan.lanzou.com/i0jon3e
其中上面的font.css
fontname代表字体文件名的名称
例如你的字体文件是heiti.ttf
那么上面的
fontname全都要改为heiti
OK,引入之后的效果
看得出来是已经发生改变了!
里客云资源站
http://www.likeyunba.com
技术交流群请加微信:likeyunba520
相关推荐
qiupu 2020-11-04
多读书读好书 2020-11-03
RedCode 2020-10-28
jiedinghui 2020-10-25
Ladyseven 2020-10-22
hellowzm 2020-10-12
zuncle 2020-09-28
Ladyseven 2020-09-11
jiedinghui 2020-09-07
xiaohuli 2020-09-02
葉無聞 2020-09-01
impress 2020-08-26
ThikHome 2020-08-24
nicepainkiller 2020-08-20
hellowzm 2020-08-18