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

    1.通过journalctl看日志 journalctl -xeu kubelet > a参考:https://www.cnblogs.com/ericnie/p/7749588.html

  2. Redis（1.12）Redis cluster搭建常见错误

    [1]gem install redis 报错 redis-cluster安装需要通过gem install redis来安装相关依赖.否则报错.通过gem install redis执行后会出现两个 ...

  3. [转帖]PostgreSQL的用户、角色和权限管理

    PostgreSQL的用户.角色和权限管理 2018年05月18日 14:02:29 jerry-89 阅读数 6143 https://blog.csdn.net/eagle89/article/d ...

  4. Linux就该这么学——新手必须掌握的命令之常用的系统工作命令

    echo命令 含义:echo命令用于在终端输出字符串或变量提取后的值,格式为 : echo [字符串|$变量] 示例: 将”Linuxprobe.com”输出到终端屏幕的命令为: [root@linu ...

  5. PHP实现字母数字混合验证码

    一款简单的PHP实现字母数字混合验证码,支持自定义验证码.验证码图片.宽度.高度.个数.背景图片等 验证码调用地址:Application\Home\Controller\CodeController ...

  6. PHPstorm配置同步服务器文件

    一.配置服务器 1.连接配置 打开菜单栏 Tools -> Deployment -> Configuration 点击 + 选择 SFTP,并填写相关服务器信息: Type:连接类型,这 ...

  7. 老贾的幸福生活day 04

    变量 变量名的规则: 变量名由字母,数字,下划线组成 变量名不能以数字开头 变量名要具有可描述性 变量名要区分大小写 变量名禁止使用python关键字 变量名不能使用中文和拼音 变量名推荐写法: 驼峰 ...

  8. MySQL之主键

    一.主键  primary key (唯一标识 .不能重复.不能为空) 1.主键-----是表中的字段,这个字段能唯一标识一条记录.例如 学生表(学号.姓名,年级)里的学号,不能重复.不能为空: 课程 ...

  9. 百度后端C++电话一面

    Json.XML差异?说全点,能想到的所有差异.然后protobuf不小心被我提出来了,开始扯三个的差异....然后问优缺点.服务端客户端使用及接口更新的影响范围如何缩小 左值,右值区别 map用什么 ...

  10. 如何调试Python程序 通过IDLE

    在python3.3环境下 1.写一个简单地Python源文件,比如test.py,内容如下: import sys, osdef test(arg1, arg2): print "begi ...