自定义字体需要css的,CSS 自定义字体

移动端如何兼容UI给的字体

目录移动端如何兼容UI给的字体移动端的默认字体IOS

Android

Winphone

注意

自定义字体为什么要自定义字体

如何自定义样式

移动端的默认字体

IOS

默认中文字体是Heiti SC

默认英文字体是Helvetica

默认数字字体是HelveticaNeue

Android

默认中文字体是Droidsansfallback

默认英文和数字字体是Droid Sans

Winphone

默认中文字体是Dengxian(方正等线体)

默认英文和数字字体是Segoe

注意

以上系统均不支持“微软雅黑”

自定义字体

为什么要自定义字体

上周UI给了一个 “迷你简粗圆” 字体的套图, 但是移动端系统中并没有这个字体，因此即便我们使用 font-family 也没有办法让它显示出我们所需要的字体样式。因此，我们需要自定义样式。

如何自定义样式

得到该字体 “minijiancuyuan.ttf”

从互联网上将 “迷你简粗圆” 字体下载到本地项目中 font 目录下。

转换字体格式

www.fontconverter.org

打开该网站，并且上传 minijiancuyuan.ttf 文件，转换为 eot/woff/svg 格式，下载回本地，存放于本地项目 font 目录下

CSS 使用 @font-face 模块，创建该字体

@font-face {

font-family: 'minijiancuyuan(字体名称)';

src: url('font/minijiancuyuan.eot'); /* IE9 Compat Modes */

src: url('font/minijiancuyuan.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('font/minijiancuyuan.woff') format('woff'), /* Modern Browsers */

url('font/minijiancuyuan.ttf') format('truetype'), /* Safari, Android, iOS */

url('font/minijiancuyuan.svg#minijiancuyuan') format('svg'); /* Legacy iOS */

}

调用该字体

#demo{

font-family:'minijiancuyuan';

}

这样我们就可以使用这个字体了。

来源：https://www.cnblogs.com/riven952465/p/5992287.html