如何导入自己下载的字体？

首先，我们下载的字体格式一般是.ttf或者.otf，我们需要在样式表中定义我们下载的字体，也就是在style中定义，定义的是font-family（字体族）

@font-face {font-family: MyFontName;//自定义字体名称src: url(Mother-Tongue-Personal-Use-2.otf)//文件名
}

接下来，当我们想应用导入的字体时，比如：

dt{font-size:100px;font-family: MyNewFont;  //在这里应用
}
dd{font-size:90px;font-family: MyNewFont; //在这里应用
}
h3{font-size:120px;font-family: MyNewFont; //在这里应用color:red;
}

<body><div class="div1"><h3>Hello world!!!</h3><dl><dt>Some Words</dt><dd>I love you!!!</dd><dd>I love progamming!!!</dd><dd>I love progamming!!!</dd><dd>I love progamming!!!</dd><dd>I love progamming!!!</dd><dd>I love progamming!!!</dd><dd>I love progamming!!!</dd></dl></div></body>

效果如下：

关于font的详细介绍：

HTML5 怎么自定义字体相关推荐

01_MUI之Boilerplate中：HTML5示例，动态组件，自定义字体示例，自定义字体示例，图标字体示例
1安装HBuilder5.0.0,安装后的界面截图如下: 2 按照https://www.muicss.com/docs/v1/css-js/boilerplate-html中的说明,创建上图的 ...
html5怎么引入苹方简,Kindle 推荐使用“苹方-简”自定义字体，阅读体验最舒服...
原标题:Kindle 推荐使用"苹方-简"自定义字体,阅读体验最舒服很多年以后,你肯定依然记得反反复复折腾 Kindle.为了自定义更换字体,频繁把 Kindle 越狱,再自定义 ...
html引用不了自定义字体,html5 – 自定义@ font-face不加载chrome(chrome自定义字体无法渲染)...
自定义@ font-face不加载chrome(chrome自定义字体无法渲染)使用CSS自定义字体 @font-face { font-family:'gotham-rounded-medium'; ...
html5自定义字体
我在做移动端Web开发的时候,遇到过设计师设计的特殊字体,而且很容易用肉眼识别的一种字体-方正轻刻简体,平时他们使用方正兰亭黑我就用默认的字体Helvetica显示,还凑合,但是这种字体,很难用默认 ...
前端React项目的Next.js项目通过CSS引入自定义字体文件
最近在Web3的项目,需要引入自定义字体,做下记录: 1. 如果是下载的字体文件,直接能使用的就不需要转换,如果是TTF格式则需要转换成eot.svg.woff.woff2,这里提供一个网站Font ...
fontforge制作自定义字体及在手机上应用举例——张鑫旭
一.看似无关紧要的事件背景之所以花时间折腾fontforge这个软件,去制作什么自定义的字体是有原因滴. 之前提过,最近我抽空将公司的手机软件HTML5网页化.期间碰到这么一个问题,页面低栏上的电话 ...
fontforge制作自定义字体及在手机上应用举例
一.看似无关紧要的事件背景之所以花时间折腾fontforge这个软件,去制作什么自定义的字体是有原因滴. 之前提过,最近我抽空将公司的手机软件HTML5网页化.期间碰到这么一个问题,页面低栏上的电话 ...
css字压,CSS自定义字体的实现，前端实现字体压缩
CSS 自定义字体移动端如何兼容UI给的字体 [toc] 移动端的默认字体 IOS 默认中文字体是Heiti SC 默认英文字体是Helvetica 默认数字字体是HelveticaNeue And ...
android单线字体,Android自定义字体
在main文件夹下,新建assets/fonts文件,添加.otf文件 image.png 字体工具类 import android.app.Application; import android.g ...
R语言基于forestplot包可视化森林图实战详解：美化的森林图：自定义字体设置、置信区间、坐标轴（刻度、标签、范围）、无效线去除、水平线、辅助线、box形状、色彩等
R语言基于forestplot包可视化森林图实战详解:美化的森林图:自定义字体设置.置信区间.坐标轴(刻度.标签.范围).无效线去除.水平线.辅助线.box形状.色彩等目录

HTML5 怎么自定义字体

如何导入自己下载的字体？

效果如下：

关于font的详细介绍：

HTML5 怎么自定义字体相关推荐

最新文章

热门文章