html5自定义字体

我在做移动端Web开发的时候，遇到过设计师设计的特殊字体，而且很容易用肉眼识别的一种字体－方正

轻刻简体，平时他们使用方正兰亭黑我就用默认的字体Helvetica显示，还凑合，但是这种字体，很难用默认字

体取代，于是想着使用自定义字体来满足设计师的要求。

先看一眼效果：

接下来介绍如何自定义字体。

自定义字体思路很简单，先定义一个字体（myFirstFont），同时这里还需要指定一个字体文件，就是设计师

在设计时的字体文件，可以向设计师索要（既然人家能使用这样的字体，人家机器上肯定有这种字体文件），也

可以在网上搜索下载，然后对需要使用特殊字体的文字使用该字体(font-family:'myFirstFont')。

定义字体的语法：

@font-face{font-family:'myFirstFont';src:url('./fzqksimple.TTF') format('truetype');
}

使用字体：

.content{font-family:'myFirstFont';}

展示的效果即和文章开头的效果一样。

题外话：因为涉及到字体文件需要加载，而且一般字体文件会相对较大，我这个自定义字体文件有3M多。为了流量和加载速度

考虑，可以让设计师尽量不要使用特殊字体。

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 在线字体库,网络字体@font-face，如何处理网页中的特殊字体？
网络字体@font-face 如何处理网页中的特殊字体 HTML5学堂:随着网页的发展,网页中出现了越来越多的字体种类,网页自带的微软雅黑.宋体.黑体已经越来越难以满足设计的需要,那么,如何在网站中使 ...
前端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 ...

html5自定义字体

html5自定义字体相关推荐

最新文章

热门文章