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

    MQTT(Message Queuing Telemetry Transport,消息队列遥测传输协议),是一种构建于TCP/IP协议上基于发布/订阅(publish/subscribe)模式的“轻量 ...

  2. shell sed 替代1

    sed -e '/-DLUA_USE_LINUX/s/-lreadline/-lreadline -lncurses/g' Makefile > tmp mv tmp Makefile 全局换- ...

  3. Linux特殊权限位suid、sgid深度详细及实践

    特殊权限位基本说明: Linux系统基本权限位为9位权限,但还有额外3位权限位,共12位权限: suid    s(有x)     S    4   用户对应的权限位(用户对应的3位上) sgid  ...

  4. Mysql——通配符和正则表达式的使用

    1.like操作符和百分号通配符 %表示任何字符出现任意次数. 查询出表TABLE中NAME字段中任意位置包含i的行: select * from TABLE where NAME like '%i% ...

  5. poj3714 Raid（分治求平面最近点对）

    题目链接:https://vjudge.net/problem/POJ-3714 题意:给定两个点集,求最短距离. 思路:在平面最近点对基础上加了个条件,我么不访用f做标记,集合1的f为1,集合2的f ...

  6. 2019牛客暑期多校训练营（第七场）-C Governing sand

    题目链接:https://ac.nowcoder.com/acm/contest/887/C 题意:有n种树,给出每种数的高度.移除的花费和数量,求最小花费是多少使得剩下树中最高的树的数量占一半以上. ...

  7. 外边距margin的叠加问题

    下午在看<css禅意花园>,书中提到了外边距重叠,于是去网上搜索了一下资料. 写了一个小例子做测试.发现网上的有些总结与我的测试不符,索性就自己总结了╮(╯▽╰)╭ <!DOCTYP ...

  8. PAT B1027 打印沙漏（20）

    思路: 使用数组保存每一行沙漏的最大符号数 输入一个正整数和一个符号 遍历数组,找到大于正整数的数组下标 j. 三角形底边的字符数为 (j - 1) * 2 - 1 打印沙漏 打印剩余字符:x - n ...

  9. zabbix-自定义告警（二）

    实现自定义监控 文章引用:https://www.cnblogs.com/clsn/p/7885990.html#auto_id_28 一.实现自定义监控 说明zabbix自带模板Template O ...

  10. Java 集合和泛型

    一.集合(Collections) Java使用集合来组织和管理对象. 1.Java的集合类 集合类主要负责保存.盛装和管理对象,因此集合类也被称为容器类. 集合类分为Set.List.Map和Que ...