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. IP 层收发报文简要剖析6--ip报文输出3 ip_push_pending_frames

    L4层的协议会把数据通过ip_append_data或ip_append_page把数据线放在缓冲区,然后再显示调用ip_push_pending_frames传送数据. 把数据放在缓冲区有两个优点, ...

  2. C++如何实现多态

    1.   什么是多态多态是C++中的一个重要的基础,面向对象编程语言中,接口的多种不同的实现方式即为多态.2.   多态带来的好处多态带来两个明显的好处:一是不用记大量的函数名了,二是它会依据调用时的 ...

  3. python dvwa布尔盲注自动化脚本（level=low）

    仅供学习代码参考 1#python dvwa布尔盲注自动化脚本 2 import requests 3 import string 4 import time 5 INIT_URL="htt ...

  4. 闭关苦修半年，最终靠着这份面试题，我成功拿到了阿里的offer！

    前言 我大概我是从去年12月份开始看书学习,到今年的6月份,一直学到看大家的面经基本上百分之90以上都会,我就在5月份开始投简历,边面试边补充基础知识等.也是有些辛苦.终于是在前不久拿到了阿里的off ...

  5. 思维导图VS金字塔原理

    作为常识,思维导图制作的核心元素是关键词,而金字塔原理制作的核心元素则是拓展的概要句子,这两种方式是当今人们常用的思维工具,本文对其做了对比,希望对你的选择有所帮助. 金字塔原理结构:从上到下三角形结 ...

  6. Fruity Parametric EQ 2使用说明（一）——FL Studio插件教程

    FL Studio插件教程-Fruity Parametric EQ 2使用说明(一) Fruity Parametric EQ 2均衡器,是一款我们在FL Studio制作音乐时经常会用到的插件,它 ...

  7. Java中的主线程

    目录 概览 主线程 怎么来控制主线程 主线程和main()函数的关系 主线程中的死锁(单个线程) 概览 前段时间有同事提到了主线程这个名词,但当时我们说的主线程是指Java Web程序中每一个请求进来 ...

  8. iOS程序内实现版本更新

    最近这段时间刚把手头里面的两个项目交付出去,很想写点东西但又不想随随便便的写些抒情的文字,其实生活中的很多事情.成长的路上遇到的很多问题,并非简简单单的抱怨.埋怨,用一种激情悲昂的情绪去逃避.去发泄所 ...

  9. 【模板】【P1182】数列分段II——二分答案

    题意:给定一列数,分成m段,使每段和的最大值最小. 考虑二分最小段和size,答案显然满足单调性.可以在每次check中累加数列元素判断当前组的总和是否在size以内.由于序列元素均为非负整数,前缀和 ...

  10. 【P1588】丢失的牛——区间dp/bfs

    (题面来自Luogu) 题目描述 FJ丢失了他的一头牛,他决定追回他的牛.已知FJ和牛在一条直线上,初始位置分别为x和y,假定牛在原地不动.FJ的行走方式很特别:他每一次可以前进一步.后退一步或者直接 ...