找回密码
 立即注册

QQ登录

只需一步,快速开始

[css3] CSS引入外部字体方法,附可用demo

[复制链接]
查看: 1400|回复: 2
最佳答案
0 

51

主题

181

帖子

5105

积分

S1

积分
5105
 楼主| 发表于 2018-2-24 10:10:19 | 显示全部楼层 |阅读模式
有时候我们做的页面需要用到一些更好看的字体
又不想用图片代替,图片会影响加载速度
则使用外部字体来显示
但是直接通过font-family又不一定全部都行
这就需要我们在css中进行定义并且引入字体文件路径
然后再使用外部字体
直接上代码:
font.html
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <title>CSS引用外部字体</title>
  6.     <link rel="stylesheet" type="text/css" href="font.css">
  7. </head>
  8. <body>
  9. <h1>里客云资源站</h1>
  10. <h2>www.likeyunba.com</h2>
  11. </body>
  12. </html>
复制代码
3655525355-5a90c9434acce_articlex.png
font.css
  1. @font-face {
  2. font-family: 'fontnameRegular';
  3. src: url('fontname.eot');
  4. src: local('fontname Regular'),
  5.         local('fontname'),
  6.         url('fontname.woff') format('woff'),
  7.         url('fontname.ttf') format('truetype'),
  8.         url('fontname.svg#fontname') format('svg');
  9. }  
  10. /*其中fontName替换为你的字体名称*/
  11. h1{font-family: fontnameRegular}
复制代码
字体文件下载:
https://pan.lanzou.com/i0jon3e
其中上面的font.css
fontname代表字体文件名的名称
例如你的字体文件是heiti.ttf
那么上面的
fontname全都要改为heiti
38336090-5a90ca2cb2e24_articlex.png
OK,引入之后的效果
看得出来是已经发生改变了!
里客云资源站
http://www.likeyunba.com
技术交流群请加微信:likeyunba520

回复

使用道具 举报

最佳答案
0 

9

主题

395

帖子

3638

积分

专家路上

积分
3638
发表于 2018-2-25 08:41:26 | 显示全部楼层
6666666666666666666
回复 支持 反对

使用道具 举报

最佳答案
0 

0

主题

8

帖子

62

积分

新人求带

积分
62
发表于 2018-3-8 10:06:12 | 显示全部楼层
强烈支持楼主ing……
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则



www.henkuai.com—微信开发者的分享交流平台,专注微信开发生态。

天津市滨海新区
中新生态城中成大道生态建设公寓9号楼3层301

微信公众号

广告推广
QQ:805874290

市场合作
zhongcong@henkuai.com