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

    互斥量的优先级继承机制可以减少优先级翻转问题,通过将持有锁的任务的优先级提升到当前任务中优先级任务最高的任务. #define KEY1_EVENT (0x01 << 0) #define ...

  2. 菜鸟系列Fabric——Fabric 私密数据（6）

    Fabric 私密数据 1.私密数据的定义 如果某个渠道上的一组组织需要将数据与该渠道上的其他组织保密,他们可以选择创建一个仅包含需要访问数据的组织的新渠道.但是,在每种情况下创建单独的通道会产生额外 ...

  3. 事务配置在applicationContext.xml文件中不起作用，控制不了异常回滚

    一.博主在学习到整合ssm框架的时候,遇到一个奇葩的问题就是将 事务的控制 ,写在在applicationContext.xml文件中不起作用,在事务控制的方法中,即使出现了异常,但是事务不会回滚的坑 ...

  4. [转帖]IP地址和CIDR

    IP地址和CIDR https://www.cnblogs.com/cocowool/p/8303795.html 感谢原作者 自己竟然忘记了 classless inter-domain route ...

  5. 初学K3Cloud开发

    1.BOS中在新建的空白对象中添加一个下推按钮 1.点击“菜单集合”属性 2.在打开的窗体中,点中“工具条”,新增一个按钮 3.将新增的按钮标题改为“下推”,并配置点击事件 列表菜单增加“下推”类似, ...

  6. Ubuntu 下几种软件安装的方法小结

    1.tar.gz软件包的安装 1)解压tar.gz包 .tar.gz -C /home/Desktop # 将软件包名.tar.gz解压到指定的目录下 2)进入解压后的文件目录下      执行“./ ...

  7. # MATLAB数据处理

    目录 MATLAB数据处理 数据归一化处理 冒号的作用(获取指定行列的数据) MATLAB数据处理 mean(A,(b)) %均值函数,b为设置对哪一维上的数据进行处理,默认为第一维(列),行为第二维 ...

  8. 16-Perl 文件操作

    1.Perl 文件操作Perl 使用一种叫做文件句柄类型的变量来操作文件.从文件读取或者写入数据到文件需要使用文件句柄.文件句柄(file handle)是一个I/O连接的名称.Perl提供了三种文件 ...

  9. 《深入实践C++模板编程》之四——特例

    1. 所谓模板特例,是针对符合某种条件的模板参数值集合另外声明的模板实现变体. template<typename T> class my_vector; template<> ...

  10. 修改源码去除zblog博客分类目录的RSS图标

    zblog博客的所建立的分类默认前面是有一个RSS图标的,如下图所示: 其实这个图标的存在并不能起到太大的美化作用,增加用户订阅数量的作用.那么应该如何去掉这个RSS图标呢? 这个RSS图标的生成在z ...