有时候我们做的页面需要用到一些更好看的字体
又不想用图片代替，图片会影响加载速度
则使用外部字体来显示
但是直接通过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. SQL Server 验证身份证合法性函数（使用VBScript.RegExp）

    原文:SQL Server 验证身份证合法性函数(使用VBScript.RegExp) 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/wzy0623 ...

  2. python---博客分类目录

    python基础 python函数 python模块 python面向对象 网络编程 并发编程 数据库 前端学习 HTML基础 CSS基础 JavaScript基础 js操作BOM和DOM jQuer ...

  3. T100——查询 r类 报表开发流程

    报表开发流程:1.建立入口程序 如r类的作业:cxmr500步骤: azzi900中建立程序代号 azzi910中建立作业代号 设计器--规格--签出 设计器--程序--签出 adzp168(r.a) ...

  4. 并不对劲的复健训练-p3674

    题目大意 给出序列$ a_1,...,a_n $ ( $ n\leq10^5,a\leq 10^5 $ ),有\(m\) ( \(m\leq 10^5\))个以下三类询问: (1)给出\(l,r,k\ ...

  5. nginx代理 tomcat获得真实用户IP

    nginx代理 tomcat获得真实用户IP 2017年04月08日 21:34:17 cf 阅读数 1825更多 分类专栏: nginx html/js/ajax   版权声明:本文为博主原创文章, ...

  6. 怎样使用 v-if 实现 html 元素的显示 / 隐藏?

    1. 首先, 指令后的引号内是可以写 js 表达式的, 这点很重要. v-if 的用法很简单, 只需要给 v-if = " " 的引号内放一个 布尔值 即可. 注意: v-if 的 ...

  7. 【ES6 】var/let/const的区别

    var 声明变量 没有区级作用域 可以预解析 可以重复定义 声明的全局变量属于顶层对象(window)的属性 let 声明变量 有块级作用域 没有预解析 不可以重复定义 声明的全局变量不属于顶层对象( ...

  8. whistle学习（一）之安装、使用、软件功能了解

    前言 whistle是基于Node实现的跨平台抓包调试代理工具,有以下基本功能: 查看HTTP.HTTPS请求响应内容 查看WebSocket.Socket收发的帧数据 设置请求hosts.上游htt ...

  9. nginx之配置

    1)反向代理(Reverse Proxy)方式是指以代理服务器来接受internet上的连接请求,然后将请求转发给内部网络上的服务器,并将从服务器上得到的结果返回给internet上请求连接的客户端, ...

  10. MySQL之常用查询

    1) 查询字符集 show variables like 'character%'; 2)查看版本 select version(); 3) 共享表空间的数据文件存储路径 show variables ...