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. JavaScript变量声明与变量声明提前

    JavaScript变量声明 JavaScript中存储数据的容器称为变量.用关键字和标识符创建新变量的语句,称为变量声明.可以通过关键字var进行变量声明,在ES6中增加了let.const关键字声 ...

  2. 334. Increasing Triplet Subsequence（也可以使用dp动态规划）

    Given an unsorted array return whether an increasing subsequence of length 3 exists or not in the ar ...

  3. spark-submit提交python脚本过程记录

    最近刚学习spark,用spark-submit命令提交一个python脚本,一开始老报错,所以打算好好整理一下用spark-submit命令提交python脚本的过程.先看一下spark-submi ...

  4. Function（函数分享）第二节

    一.类型注解 1.1 类型注解 函数的类型注解分为两个部分:参数类型注解和返回值类型注解.其中返回值类型注解有时候我们可以直接省略,因为Typescript可以根据返回的语句来自动判断出返回值的类型. ...

  5. 建议收藏，从零开始创建一个Activiti工作流，手把手教你完成

    环境配置 项目环境: JDK1.8 tomcat7 maven3.5 开发工具: IDEA activiti7 创建项目 目标:创建一个maven项目,集成Activiti,并自动生成25张数据库表 ...

  6. Charles mock数据详解

    Charles是一款非常好用的代理工具,关于Charles的安装.破解.安装证书,连接手机代理等使用方法详见我之前的博客:https://www.cnblogs.com/feng0815/p/8043 ...

  7. MediaCodec编码OpenGL速度和清晰度均衡

      ## 概述 在安卓平台为了实现h264视频编码,我们通常可以使用libx264, ffmpeg等第三方视频编码库,但是如果对编码的速度有一定的要求,要实现实时甚至超实时的高速视频编码,我们并没有太 ...

  8. phpstorm中去除sql的背景颜色

    链接 http://www.oschina.net/question/1779564_2143393 这是去除黄线   再去除灰色线

  9. 惠州发布5G任务计划表，将出台智慧灯杆建设计划与技术规范

    广东省惠州市于近日发布<惠州市贯彻落实广东省加快5G产业发展行动计划(2019-2022年)工作任务计划表>(以下简称:<5G任务计划表>). <5G任务计划表>明 ...

  10. ConvTranspose2d

    nn.ConvTranspose2d的功能是进行反卷积操作 nn.ConvTranspose2d(in_channels, out_channels, kernel_size, stride=1, p ...