资讯专栏INFORMATION COLUMN

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

wangbinke / 333人阅读

摘要:有时候我们做的页面需要用到一些更好看的字体又不想用图片代替,图片会影响加载速度则使用外部字体来显示但是直接通过又不一定全部都行这就需要我们在中进行定义并且引入字体文件路径然后再使用外部字体直接上代码引用外部字体里客云资源站其中替换为

有时候我们做的页面需要用到一些更好看的字体
又不想用图片代替,图片会影响加载速度
则使用外部字体来显示
但是直接通过font-family又不一定全部都行
这就需要我们在css中进行定义并且引入字体文件路径
然后再使用外部字体

直接上代码:
font.html




    
    CSS引用外部字体
    


里客云资源站

www.likeyunba.com

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/51856.html

相关文章

  • CSS引入外部字体方法可用demo

    摘要:有时候我们做的页面需要用到一些更好看的字体又不想用图片代替,图片会影响加载速度则使用外部字体来显示但是直接通过又不一定全部都行这就需要我们在中进行定义并且引入字体文件路径然后再使用外部字体直接上代码引用外部字体里客云资源站其中替换为 有时候我们做的页面需要用到一些更好看的字体又不想用图片代替,图片会影响加载速度则使用外部字体来显示但是直接通过font-family又不一定全部都行这就需...

    mudiyouyou 评论0 收藏0
  • 前端笔记之CSS(上)

    摘要:宋体注意使用某种特定的字体系列宋体完全取决于用户机器上该字体系列是否可用这个属性没有指示任何字体下载。但是记住,最终选择上的是最后的那个后代元素。 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对...

    番茄西红柿 评论0 收藏0
  • jQuery+PHP实现点击按钮加载更多,不刷新页面加载更多数据!可用源码+demo

    摘要:注意,里面需要引入库,自己可以去网上下载这个压缩版的。下面是数据库数据库账号,密码,地址这个根据自己的开发配置填,我的代码里面,数据库名为,表名为下面是结构截图就这么多了很简单吧本教程由里客云资源站提供 先上效果:showImg(https://segmentfault.com/img/bV37XZ?w=294&h=592); 刚打开页面的时候,只显示部分数据,点击加载更多的时候,就会...

    LeoHsiun 评论0 收藏0
  • jQuery+PHP实现点击按钮加载更多,不刷新页面加载更多数据!可用源码+demo

    摘要:注意,里面需要引入库,自己可以去网上下载这个压缩版的。下面是数据库数据库账号,密码,地址这个根据自己的开发配置填,我的代码里面,数据库名为,表名为下面是结构截图就这么多了很简单吧本教程由里客云资源站提供 先上效果:showImg(https://segmentfault.com/img/bV37XZ?w=294&h=592); 刚打开页面的时候,只显示部分数据,点击加载更多的时候,就会...

    Ashin 评论0 收藏0
  • PHP+AJAX实现账号注册和登陆,可用demo

    摘要:前言登陆和注册已经是网站的标配了,所以这是我们开发学习过程中必学的了。其实很容易实现,只需要懂数据库的增删改查,还有的条件语句即可做出来。 前言 登陆和注册已经是网站的标配了,所以这是我们web开发学习过程中必学的了。其实很容易实现,只需要懂数据库的增删改查,还有if_else的条件语句即可做出来。 目录 css --Login-Reg.css server ...

    mrcode 评论0 收藏0

发表评论

0条评论

wangbinke

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<