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

    MySQL中的聚集索引和辅助索引 当你定义一个主键时,innodb存储引擎就把他当做聚集索引 如果你没有定义一个主键,则innodb定位到第一个唯一索引,且改索引的所有列值均为非空,就将其当做聚集索引 ...

  2. linux 软连接和 硬链接的区别

    Linux软链接硬链接的区别   ln是linux中又一个非常重要命令,它的功能是为某一个文件在另外一个位置建立一个同步的链接.当我们需要在不同的目录,用到相同的文件时,我们不需要在每一个需要的目录下 ...

  3. Android Application的目录结构

    目录结构: 1,java目录:保存java或kotlin源文件 2,res目录:保存Android项目的各种资源文件.比如layout子目录存放界面布局文件,values子目录存放各种XML格式的资源 ...

  4. jQuery添加/删除Select的Option项

    使用语法1. $("#select_id").append("<option value='Value'>Text</option>") ...

  5. PAT B1006 换个格式输出整数 (15)

    AC代码 #include <cstdio> const int max_n = 3; char radix[max_n] = {' ', 'S', 'B'}; int ans[max_n ...

  6. PAT B1016.部分A+B（15)

    B1016.部分A+B(15) #include <cstdio> #include <cstring> int calc(long long a, long long da) ...

  7. 关于vs code文本编辑器的快捷键

    另一篇编辑器Sublime Text下载.使用教程.插件推荐说明.全套快捷键 基础编辑 快捷键 作用 Ctrl+X 剪切 Ctrl+C 复制 Ctrl+Shift+K 删除当前行 Ctrl+Enter ...

  8. 协议相关（HTTP，TCP，webservice，socket）

    什么是协议? 我们常常点开的链接(URL)就有HTTP.HTTPS协议 枯燥点的知识(协议模型) HTTP,webservice都是在<TCP/IP协议>的应用层. TCP,socket在 ...

  9. 北电之死：谁谋杀了华为的对手？——银湖资本（Silver Lake）董事总经理爱德华·詹德出任CEO，既不了解华为，也不重视中国，直截了当地否决了收购华为

    作者:戴老板:微信公众号:饭统戴老板(ID: worldofboss) 2003年5月,北京SARS疫情紧张,摩托罗拉集团总裁迈克·扎菲罗夫斯基(Mike Zafirovski)却准备不走寻常路,决定 ...

  10. js对象的 两种访问方式

    来对象访问属性有两种方式.有一个对象Obj = {"Name":"Langshen","AGE":"28"} 用点访问, ...