有时候我们做的页面需要用到一些更好看的字体
又不想用图片代替，图片会影响加载速度
则使用外部字体来显示
但是直接通过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

CSS引入外部字体方法，附可用demo的更多相关文章

  1. css引入外部字体使网站字体更美观

    @font-face{font-family: myFont;src:url("../font/timesi.ttf");src:url("../font/timesbi ...

  2. CSS引入外部字体

    @font-face {    font-family: '综艺体';    font-style: normal;    font-weight: normal;    src: url(../cs ...

  3. 不同浏览器css引入外部字体的方式

    /** * 字体后缀和浏览器有关,如下所示 * .TTF或.OTF,适用于Firefox 3.5.Safari.Opera * .EOT,适用于Internet Explorer 4.0+ * .SV ...

  4. 中文字体压缩器-解决css引入的字体太大的问题

    字蛛是一个中文字体压缩器 官方网站:http://font-spider.org/index.html 用于解决页面引入的css字体过大的问题 使用方法: npm i -g font-spider 在 ...

  5. HTML引入外部字体

    HTML5如何引入外部字体 背景 现在我需要 "Montserrat-ExtraLight ExtraLight"类型的字体,但是html的font-family中找不到这个类型的 ...

  6. css引入特殊字体

    http://www.fontsquirrel.com/tools/webfont-generator        ttf格式的字体转换成其他格式的字体   css引入特殊字体建议只是用英文字体,中 ...

  7. 006-CSS引入外部字体

    我们制作页面css,设置字体,可能会需要加入一些比较特殊的字体,这时候就需要引入这些字体. 方法如下: @font-face { font-family: KuTang;/*定义字体的名字*/ src ...

  8. JS 计算时间差，（引入外部字体文件）

    JavaScript Date() 对象: new Date() :时间对象,会把当前时间作为其初始值: setFullYear() :用于设置月份,可有三个参数,setFullYear(year,m ...

  9. css引入本地字体

    1.首先创建一个字体 @font-face { font-family: 'number_font'; //创建一个number_font字体名称 src: url('../../../style/F ...

随机推荐

  1. pig-csm 7.9修改记录

    PigCms\Lib\Action\System\UsersAction.class.php 存在页面广告跳转 bbs.go _pe.cn的问题 tpl\Home\weimob\public_head ...

  2. pubwin扫描安装

    1,注意顺序 先安装一代 FS533 2,在安装精伦 3,在重新注册 PUBWIN 如果还不行一般是注册商没给注册好

  3. 论文阅读 | A Survey on Multi-Task Learning

    摘要 多任务学习(Multi-Task Learning, MTL)是机器学习中的一种学习范式,其目的是利用包含在多个相关任务中的有用信息来帮助提高所有任务的泛化性能. 首先,我们将不同的MTL算法分 ...

  4. [Comet OJ - Contest #6 D][48D 2280]另一道树题_并查集

    另一道树题 题目大意: 数据范围: 题解: 这个题第一眼能发现的是,我们的答案分成两种情况. 第一种是在非根节点汇合,第二种是在根节点汇合. 尝试枚举在第几回合结束,假设在第$i$回合结束的方案数为$ ...

  5. 【转帖】CentOS 7 修改时区

    CentOS 7 修改时区 https://www.cnblogs.com/yaohong/p/7269878.html timedatectl 以及 time   分类: 操作系统-CentOS u ...

  6. jenkins 控制台输出中文乱码

    jenkins在执行构建任务时会在 console output 进行任务的日志输出,但中文输出会乱码,如下图 解决办法: Manage Jenkins --->  系统配置 ---> 全 ...

  7. Minimum Cut(2015沈阳online)【贪心】

    Minimum Cut[贪心]2015沈阳online 题意:割最少的边使得图不连通,并且割掉的边中有且仅有一条是生成树的边. 首先,我们选择一条树中的边进行切割,此时仅考虑树上的边集,有两种情况:1 ...

  8. selenium的使用与chromedriver的下载配置

    Selenium是一个web自动化测试工具,最初是为网站自动化测试而开发的,Selenium可以直接运行在浏览器上,它支持所有主流的浏览器,可以接受指令,让浏览器自动加载页面,获得需要的数据,甚至页面 ...

  9. Boot-crm管理系统开发教程(三)

    (ps:前两章我们已经把管理员登录和查看用户的功能实现了,那么今天我们将要实现:添加用户,删除用户,和修改用户功能) 由于Cusomer的POJO类型已经写好了,所以这次我们之前从CustomerCo ...

  10. Java EE javax.servlet中的Servlet接口

    Servlet接口 public interface Servlet 其实现类有:FaceServlet.GenericServlet.HttpServlet 一.介绍 Servlet接口定义了所有s ...