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. 是什么让我节省了60%的编码时间？使用MBG

    MyBatis Generator简介 业务需求不断变更,数据库表结构不断修改,是我们逃不出的宿命.工欲善其事,必先利其器,是时候祭出神器了:MyBatis Generator(简称:MBG),它是一 ...

  2. minishell的实现

    直接上各个模块的代码,注释都在文档代码中,非常详细,加上最后的Makefile文件完全可以自行运行看懂: main函数一个文件main.c 1 /* 2 minishell实现的功能:简单命令解析.管 ...

  3. 流编辑器：sed

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

  4. mysql参数总结

    1.innodb_old_blocks_pct 确定modpoint位置,默认37,(3/8=37%)可以通过这个调整young与old比. innodb_old_blocks_time:当有大的查询 ...

  5. 记一次ceph的故障修复(20160408)

    ceph的在正常运行的时候基本不会出现故障,出现故障一般在变动的时候,具体有下面几种可能出现的情形 软件升级 增加存储节点 减少存储节点 调整副本数目 调整pg数目 磁盘出现损坏 节点网络出现异常 以 ...

  6. 虚拟机搭建CentOS 7系统

    准备工作先查看本机是否开启虚拟化 可以打开任务管理器中性能选项 可以看到虚拟化默认关闭,可通过打开BIOS,找到Configuration或Security选项,把Virtualization或者In ...

  7. 算法基础——KMP字符串匹配

    原题链接 题目: 给定一个模式串S,以及一个模板串P,所有字符串中只包含大小写英文字母以及阿拉伯数字. 模板串P在模式串S中多次作为子串出现. 求出模板串P在模式串S中所有出现的位置的起始下标. 输入 ...

  8. 如何使用ABBYY FineReader 用户词典识别专业术语？

    ABBYY FineReader 15可以说是比较新的版本,在这个版本中能运用强大的光学字符识别技术对PDF文档扫描件.图像等文件进行OCR识别.在识别的过程中,会使用其内置的词典检查识别文字,以获得 ...

  9. 带你了解Boom 3D的Mac版音效模式

    音乐是很好的情绪抒发途径,因为音乐蕴含了很多信息,包含了很多情感,所以我们聆听不同种类的音乐的时候会产生不同的心理感受.这就是音乐的魅力,可以让人产生共鸣引发无数的思绪.为了能够更好的体会感受音乐可以 ...

  10. Anno微服务引擎与传统应用相融合

    1.Anno是什么? Anno是一个微服务引擎.在此之前我们通过 Viper项目对Anno有一个基本的认识,并且Viper也受到的很多朋友的喜欢,截止发稿前Viper在GitHub收获了300多个星. ...