HTML5如何引入外部字体

背景

现在我需要 “Montserrat-ExtraLight ExtraLight”类型的字体，但是html的font-family中找不到这个类型的字体。

于是我需要下载该类型的字体，并通过CSS将它引入html文档中。

方法

准备好下载的字体文件

在CSS文件中写入：

@font-face{

    font-family: <Montserrat-ExtraLight>;

    src:ur('./fonts/Montserrat-ExtraLight.pfb.ttf') format('truetype');

    font-weight:normal;

    font-style:normal;

}

其中src根据自己放置的字体文件路径填写。

但是我还没有成功

HTML引入外部字体的更多相关文章

  1. css引入外部字体使网站字体更美观

    @font-face{font-family: myFont;src:url("../font/timesi.ttf");src:url("../font/timesbi ...

  2. CSS引入外部字体方法，附可用demo

    有时候我们做的页面需要用到一些更好看的字体又不想用图片代替,图片会影响加载速度则使用外部字体来显示但是直接通过font-family又不一定全部都行这就需要我们在css中进行定义并且引入字体文件路径然 ...

  3. 006-CSS引入外部字体

    我们制作页面css,设置字体,可能会需要加入一些比较特殊的字体,这时候就需要引入这些字体. 方法如下: @font-face { font-family: KuTang;/*定义字体的名字*/ src ...

  4. JS 计算时间差，（引入外部字体文件）

    JavaScript Date() 对象: new Date() :时间对象,会把当前时间作为其初始值: setFullYear() :用于设置月份,可有三个参数,setFullYear(year,m ...

  5. 微信小程序如何引入外部字体库iconfont的图标

    每天学习一点点 编程PDF电子书.视频教程免费下载:http://www.shitanlife.com/code 微信小程序不能识别很多文件, 其中就包括外部的字体文件. 那我们怎么突破他的防火线呢, ...

  6. css如何引入外部字体？

    第一步,在CSS中引入字体并给名字取一个合适的名字,如下 1 2 3 4 5 6 7 @font-face {     /* font-properties */     font-family: p ...

  7. 页面引入外部字体ttf，如何提取所需要的ttf字体或者加载过慢的解决方法-1127更新

    最近几天编写手机端的页面之后,文中需要华文行楷字体,在网上下载后,引入到了自己的前端页面,以为没有什么事了,继续码代码 @font-face { font-family:huawen; src: ur ...

  8. vue项目引入外部字体

    1.UI设计图有"华文黑体",担心客户端没有该字体,将"huawen.ttf"字体文件,放入项目中: 2.创建一个font.scss(或font.css)文件: ...

  9. 不同浏览器css引入外部字体的方式

    /** * 字体后缀和浏览器有关,如下所示 * .TTF或.OTF,适用于Firefox 3.5.Safari.Opera * .EOT,适用于Internet Explorer 4.0+ * .SV ...

随机推荐

  1. 第05组 Alpha冲刺 (3/6)（组长）

    .th1 { font-family: 黑体; font-size: 25px; color: rgba(0, 0, 255, 1) } #ka { margin-top: 50px } .aaa11 ...

  2. Mysql事物与二阶段提交

     1.事务的四种特性(ACID) 事务可以是一个非常简单的SQL构成,也可以是一组复杂的SQL语句构成.事务是访问并且更新数据库中数据的一个单元,在事务中的操作,要么都修改,要么都不做修改,这就是事务 ...

  3. springboot linux打包后访问不到resources 下面的模板文件

    在本地是可以直接获取模板文件并下载,但是服务器上就不行 本地代码: @Overridepublic void downArchRelayTemplate(HttpServletRequest requ ...

  4. appium-appium的等待时间

    #三种appium设置等待时间的方法 #第一种 sleep(): 设置固定休眠时间. python 的 time 包提供了休眠方法 sleep() , 导入 time包后就可以使用 sleep()进行 ...

  5. SQL语句的学习

    SQL语句的学习 要交作业了,刚好把SQL查询语句的内容写成笔记,以后好查看.水一下 单表查询 DISTINCT:去掉结果中的重复行作用,将DISTINCT关键字放在select的后面.目标列名的前面 ...

  6. 单线程的Redis有哪些慢动作？

    持续原创输出,点击上方蓝字关注我 目录 前言 为什么 Redis 这么火? 键和值的保存形式? 为什么哈希表操作变慢了? 集合的操作效率? 有哪些数据结构? 不同操作的复杂度? 总结 前言 现在一提到 ...

  7. Service Cloud零基础学习(二)Entitlement & MileStone

    https://trailhead.salesforce.com/content/learn/modules/entitlements 很少会有人不买东西,买的多了也很少没有人没有经历过售后流程.我们 ...

  8. 深度分享：面试阿里，字节跳动，美团90%会被问到的HashMap知识

    一,HashTable 哈希表,它相比于hashMap结构简单点,它没有涉及红黑树,直接使用链表的方式解决哈希冲突. 我们看它的字段,和hashMap差不多,使用table存放元素 private t ...

  9. 深度解析：java必须掌握的知识点——类的重用

    类继承的概念和语法 类继承的概念 根据已有类来定义新类,新类拥有已有类的所有功能. Java只支持类的单继承,每个子类只能有一一个直接超类(父类). 超类是所有子类的公共属性及方法的集合,子类则是超类 ...

  10. css3系列之transform 详解skew

    skew skewx skewy skewX()  倾斜该元素,里面填的是角度,下面↓ 你会看到,随着元素被倾斜,高度居然不变.聪明的你,一定会知道,高度不变,代表了,Y轴被拉伸了. 跟scale 同 ...