失眠网,内容丰富有趣,生活中的好帮手!
失眠网 > @font-face 加载字体引用字体之后不起作用

@font-face 加载字体引用字体之后不起作用

时间:2022-10-19 16:40:34

相关推荐

@font-face 加载字体引用字体之后不起作用

如题,最近在学习css的时候遇到如下情况

使用@font-face加载多种字体不起作用

反思:是我搞错了,字体加载可能就是要一条一条的写

文件结构目录

代码如下

<!doctype html><head><meta charset="utf-8"><style type="text/css">@font-face{font-family: BOOMBOX;src: url(font/BOOMBOX.TTF);font-family: FZJZJW;src: url(font/FZJZJW.TTF);font-family: LTCH;src: url(font/LTCH.TTF);font-family: ONYX;src: url(font/ONYX.TTF);font-family: ROCK;src: url(font/ROCK.TTF);font-family: TCCM____;src: url(font/TCCM____.TTF);}</style><title>第三次作业</title></head><body><div><footer ><p>字体测试</p><ol><li style="font-family:BOOMBOX">THE QUICK BROwN FOX JUMPS OVER THE LAZY</li><li style="font-family:FZJZJW">THE QUICK BROwN FOX JUMPS OVER THE LAZY</li><li style="font-family:LTCH">THE QUICK BROwN FOX JUMPS OVER THE LAZY</li><li style="font-family:ONYX">THE QUICK BROwN FOX JUMPS OVER THE LAZY</li><li style="font-family:ROCK">THE QUICK BROwN FOX JUMPS OVER THE LAZY</li><li style="font-family:TCCM____">THE QUICK BROwN FOX JUMPS OVER THE LAZY</li></ol></footer></div></body>

运行结果

后经过修改

<!doctype html><head><meta charset="utf-8"><style type="text/css">@font-face{font-family: BOOMBOX;src: url(font/BOOMBOX.TTF);}@font-face{font-family: FZJZJW;src: url(font/FZJZJW.TTF);}@font-face{font-family: LTCH;src: url(font/LTCH.TTF);}@font-face{font-family: ONYX;src: url(font/ONYX.TTF);}@font-face{font-family: ROCK;src: url(font/ROCK.TTF);}@font-face{font-family: TCCM____;src: url(font/TCCM____.TTF);}</style><title>第三次作业</title></head><body><div><footer ><p>字体测试</p><ol><li style="font-family:BOOMBOX">THE QUICK BROwN FOX JUMPS OVER THE LAZY</li><li style="font-family:FZJZJW">THE QUICK BROwN FOX JUMPS OVER THE LAZY</li><li style="font-family:LTCH">THE QUICK BROwN FOX JUMPS OVER THE LAZY</li><li style="font-family:ONYX">THE QUICK BROwN FOX JUMPS OVER THE LAZY</li><li style="font-family:ROCK">THE QUICK BROwN FOX JUMPS OVER THE LAZY</li><li style="font-family:TCCM____">THE QUICK BROwN FOX JUMPS OVER THE LAZY</li></ol></footer></div></body>

结果2如下

如果觉得《@font-face 加载字体引用字体之后不起作用》对你有帮助,请点赞、收藏,并留下你的观点哦!

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。