移动端页面字体使用参考

PC页面中通常使用微软雅黑作为中文字体进行设计,但在移动端,手机系统 ios、android 等是不支持微软雅黑字体,建议使用移动端系统默认的字体进行设置;如需求中有特殊字体或者图标可以使用WEB字体进行设置;

系统默认字体设置

body {
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC","Helvetica Neue",STHeiti,"Microsoft Yahei",Tahoma,Simsun,sans-serif;
}

[info] 说明

-apple-system 是在以 WebKit 为内核的浏览器(如 Safari)中,调用 Apple(苹果公司)系统(iOS, macOS, watchOS, tvOS)中默认字体(现在一般情况下,英文是 San Francisco,中文是苹方)
BlinkMacSystemFont 是在 Chrome 中实现调用 Apple 的系统字体

ios 系统默认字体
iOS 4.0+: 中文字体为 "华文黑体STHeiTi"、英文字体为 "Helvetica Neue";

iOS 9+: Safari开始支持 -apple-system 参数, Chrome 使用 BlinkMacSystemFont ,兼容 iOS / MacOS

android 系统默认字体
原生Android下中文字体与英文字体都选择默认的无衬线字体。

4.0 之前版本英文字体原生 Android 使用的是 Droid Sans,中文字体原生 Android 会命中 Droid Sans Fallback

4.0 之后中英文字体都会使用原生 Android 新的 Roboto 字体

winphone 系统默认字体 默认中文字体是Dengxian(方正等线体)
默认英文和数字字体是Segoe

综上,各个手机系统有自己的默认字体,如无特殊需求,手机端无需定义中文字体,建议使用系统默认字体。如果需求包含特殊字体,可以使用CSS3 @font-face进行定义。

WEB字体

移动端IOS系统、安卓系统均支持.ttf格式的字体,WEB字体选择中建议引用.ttf格式字体;

// 定义web字体
@font-face {
    font-family: 'WebFontName';
    src: url('WebFontName.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
   }

.WebFontName {
     font-family: 'WebFontName'
   }

[info] 说明

在使用web字体前,请先确认字体是否免费,或是否有该字体的版权;
中文字体文件一般较大,有几M或者更大,建议使用工具提取页面中需要的字的字体文件;

WEB字体相关工具介绍

字体格式的转换工具
为了全面兼容不同浏览器,需要.eot,.woff,.ttf,.svg四种格式的字体文件,但大多数我们得到的可能只有一种格式的字体,可以通过一些在线工具进行格式转换

  • fontsquirrel,上传已有的字体文件,然后会生成所有需要的格式文件;
  • cloudconvert,全能格式在线转换,适合从一种字体格式转换为另一种;

提取页面所需字体工具

推荐使用 字蛛+(Font-spider-Plus)进行字体提取压缩,是一个智能 WebFont 压缩工具,它能自动分析出本地页面和线上页面使用的 WebFont 并进行按需压缩。

results matching ""

    No results matching ""