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. rbd的数据在哪里

    创建一个rbd [root@mytest ~]# rbd create test1 --size 4000 查看rbd信息 [root@mytest ~]# rbd info test1 rbd im ...

  2. linux修改网卡的mac地址

    linux在安装一些软件的时候可能会用到修改主机的mac地址的问题,在网卡配置文件 /etc/network/interface 中添加mac地址的方式我在修改重启机器后没有生效,所以采用其他方式 在 ...

  3. Android Support v4\v7\v13和AndroidX理解【转载】

    为什么要用support库呢? 因为在低版本Android平台上开发一个APP时,想使用高版本才有的功能,此时就需要使用Support来支持兼容. 1. android-support-v4 comp ...

  4. unity 顶点弹性网格效果

    1.球衰减 首先,我们将处理球衰减,鼠标或手指点中网格的点是碰撞点,越往外它所受的影响越小.我们需要从CPU中获取"_ImpactPos"这个碰撞点,获取摄像机和碰撞点的矢量,我们 ...

  5. day94:flask:Jinjia2模板引擎&flask中的CSRF攻击&Flask-SQLAlchemy的创建模型类和基本的增删改查

    目录 1.Jinjia2模板引擎 1.Jinjia2加载模板并传递数据到模板中 2.Jinjia2的模板语句 3.模板中特有的变量和函数 4.模板中内置的过滤器 5.自定义过滤器 6.模板继承 2.在 ...

  6. FL studio系列教程（五）：FL Studio20自带的效果器Fruity Delay3功能

    作为音乐编曲常用软件之一的FL Studio20,在国内外都有着很多真爱粉,当然,在国内我们一般都叫它水果音乐制作软件,或者直接叫"水果".它有丰富的内置插件于音源,想要用好这些插 ...

  7. 获取qq头像

    1 <?php 2 header('content-type: image/jpeg'); 3 $QQ = $_GET['qq']; 4 $time2 = date('Y-m-d H:i:s') ...

  8. Ajax原理与图解

    Ajax原理 Ajax 的全称是Asynchronous JavaScript and XML. Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后 ...

  9. 以注解的方式实现api和provider

    1.provider import com.alibaba.dubbo.config.annotation.Service; import facade.EchoService; import com ...

  10. bulk_create 批量插入数据

    def booklist(request): # 动态插入100条数据 for i in range(100): models.Book2.objects.create(name='第%s本书'%i) ...