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. JS超酷时钟的制作

    通过补充代码,实现时钟实时显示当前时间:年.月.日.时.分.秒.日期. <!DOCTYPE html> <html> <head lang="zh-CN&quo ...

  2. 流编辑器：sed

    一 简介:sed是一个精简的.非交互式的流式编辑器,它在命令行中输入编辑命令和指定文件名,然后在屏幕上查看输出.逐行读取文件内容到临时缓冲区,称为模式空间.接着用sed命令处理缓冲区内容,处理完之后, ...

  3. python之《matplotlib》

    # _*_coding:utf-8_*_# /usr/bin/env python3# Author:book Mikiimport matplotlib.pyplot as pltimport nu ...

  4. WPF窗体中嵌入/使用WinForm类/控件（基于.NET Core）

    如题,WPF中嵌入WinForm的做法,网络上已经很多示例,都是基于.NET XXX版的. 今天King様在尝试WPF(基于.NET Core 3.1)中加入Windows.Forms.ColorDi ...

  5. Python_faker (伪装者)创建假数据

    faker (伪装者)创建假数据 工作中,有时候我们需要伪造一些假数据,如何使用 Python 伪造这些看起来一点也不假的假数据呢? Python 有一个包叫 Faker,使用它可以轻易地伪造姓名.地 ...

  6. 基于udp的scoket通信

    1.udp例子1 udpserver.py # udp的server,不需要进行监听也不需要建立连接 # 在启动服务之后只能被动的等待客户端发送消息过来 # 客户端发送消息的同时还会自带地址信息 # ...

  7. 用JavaScript实现全选-反选

    实现全选-反选 在日常生活我们会遇到需要全选-反选的地方,其实用JavaScript也能实现. 样式如下所示: 样式代码如下所示: <!DOCTYPE html PUBLIC "-// ...

  8. 精尽 MyBatis 源码分析 - 整体架构

    该系列文档是本人在学习 Mybatis 的源码过程中总结下来的,可能对读者不太友好,请结合我的源码注释(Mybatis源码分析 GitHub 地址.Mybatis-Spring 源码分析 GitHub ...

  9. list scheduling algorithm 指令调度 —— 笔记

    作者:Yaong 出处:https://www.cnblogs.com/yaongtime/articles/14033444.html 版权:本文版权归作者和博客园共有 转载:欢迎转载,但未经作者同 ...

  10. 云原生应用Go语言：你还在考虑的时候，别人已经应用实践

    摘要:在近日于上海召开的第六届Gopher China大会上,华为云微服务首席架构师田晓亮分享了<华为云的Go语言云原生实战经验>,讲述如何构建韧性.高可靠.安全的云原生应用系统,并孵化云 ...