转 移动端字体设置最佳实践

字体设置

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

}

iOS 4.0+ (iOS 9以下系统已经非常少) 使用英文字体 Helvetica Neue,之前的iOS版本降级使用 Helvetica。 中文字体设置为华文黑体STHeiTi。

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

微软雅黑是为了兼容Win系统,毕竟视网膜分辨率的win系统用Simsun是非常丑陋的,可以用4K屏@windowns 去看 JD 淘宝,你能忍的话我就没话说

PingFang SC 是简体苹方,看需要 如果要命中对应 苹方字体的话 直接写 PingFang 不带引号。

需补充说明,华文黑体并不存在iOS的字体库中(http://support.apple.com/kb/HT5484?viewlocale=en_US), 但系统会自动将华文黑体STHeiTi兼容命中系统默认中文字体黑体-简或黑体-繁:

Heiti SC Light 黑体-简 细体 
Heiti SC Medium 黑体-简 中黑 
Heiti TC Light 黑体-繁 细体 
Heiti TC Medium 黑体-繁 中黑 
原生Android下中文字体与英文字体都选择默认的无衬线字体。

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

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

其他第三方Android系统也一致选择默认的无衬线字体。

Android 就直接让它命中系统字体吧,因为你无法预知发行厂商会去内置什么字体,或者人家root去修改什么字体。

转自:腾讯allowteam https://github.com/AlloyTeam/Mars/blob/master/solutions/font-family.md#字体设置

原文地址:https://www.cnblogs.com/siyecao2010/p/9248222.html

时间: 2024-10-25 12:09:32

转 移动端字体设置最佳实践的相关文章

移动web——字体设置最佳实践

body { font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif; } iOS 4.0+ 使用英文字体 Helvetica Neue,之前的iOS版本降级使用 Helvetica. 中文字体设置为华文黑体STHeiTi. 需补充说明,华文黑体并不存在iOS的字体库中(http://support.apple.com/kb/HT5484?viewlocale=en_US), 但系统会自动将华文黑体STHeiTi兼容命

腾讯优测优分享 | 探索react native首屏渲染最佳实践

腾讯优测是专业的移动云测试平台,旗下的优分享不定时提供大量移动研发及测试相关的干货~此文主要与以下内容相关,希望对大家有帮助. react native给了我们使用javascript开发原生app的能力,在使用react native完成兴趣部落安卓端发现tab改造后,我们开始对由react native实现的界面进行持续优化.目标只有一个,在享受react native带来的新特性的同时,在体验上无限逼近原生实现.作为一名前端开发,本文会从前端角度,探索react native首屏渲染最佳实

探索react native首屏渲染最佳实践

1.前言 react native给了我们使用javascript开发原生app的能力,在使用react native完成兴趣部落安卓端发现tab改造后,我们开始对由react native实现的界面进行持续优化.目标只有一个,在享受react native带来的新特性的同时,在体验上无限逼近原生实现.作为一名前端开发,本文会从前端角度,探索react native首屏渲染最佳实践. 2.首屏耗时计算方法 2.1我们关注的耗时 优化首屏渲染耗时,需要先定义首屏耗时的衡量方法.将react nat

CSS中文字体设置

字体的选择,是网页开发的关键因素之一. 合适的字体,对网页的美观度(或可读性)有着举足轻重的影响. 但是,相比英文字体,中文字体的网页开发有着极大的局限性.因为,一套中文字体最少也要有几千个字符,体积为几个MB:单单为了浏览网页,开发者不可能让用户去下载字体,只能依靠操作系统的预装字体.(*注:确实有网站提供中文字体的web服务,从技术角度,我不推荐这样做.) 不同的操作系统.不同的版本预装不同的字体(因为版权),几乎没有交集.因此,大多数开发者索性忽略中文字体,让操作系统自行渲染,或者用图片呈

移动端WEB前端开发最佳实践

移动端WEB前端开发最佳实践 Safari,Android Browser,Chrome都是以WebKit为核心的 移动设备和PC之间的页面现实存在差异(Safari中定义了viewport) 在移动设备和桌面端WEB前端开发中,事件绑定存在差异(移动触点) 页面控件设计存差异(点触不灵敏,虚拟键盘弹出框) 移动设备的网络带宽普遍比PC慢,移动页面要设置更简洁 PC页面兼容移动设备 使用流式布局 借助CSS Media queries(媒体查询)技术 使用合适的图片显示兼容方案 保持页面简洁,不

移动端布局最佳实践(viewport+rem)

通过前几天写的两篇博客(浅谈移动端三大viewport和移动端em和rem区别),我们现在来总结一下如何实现一个最佳方案. 之前在第二篇博客中提到过我们可以使用媒体查询来针对不同设备及做适配,如下图 但是这个可能不会太精准,比如我的设备布局viewport可能是370px,这样只能使用320这一版本.而事实上,他们的viewport并不相同,所以他们的布局也得不一样.也就是说我们如果用css媒体查询只能说是可以用,但不是最佳实践.其实通过看某些牛逼的移动端网站,可以看到他们的共同点,他们都是使用

Django 1.6 最佳实践: 如何设置django项目的设置(settings.py)和部署文件(requirements.txt)

Django 1.6 最佳实践: 如何设置django项目的设置(settings.py)和部署文件(requirements.txt) 作者: Desmond Chen,发布日期: 2014-05-17, 修改日期: 2014-05-18 在Django 1.6中的settings.py中可以修改130多项设置, 但大多数都继承自默认值. 设置是在web服务器启动时首次载入的, 服务器重启时重新载入, 因此, 程序员们应尽量避免修改正式服务器上使用的settings.py文件. 以下是一些我们

atitit.Atitit. Gui控件and面板-----服务端控件 java struts的实现最佳实践

atitit.Atitit.  Gui控件and面板-----服务端控件 java struts的实现最佳实践 1. 服务器控件的类别 1 1.1. 数据控件:该类控件可细分为两种类型:数据源控件和数据绑定控件. 1 1.2. 站点导航控件: 1 1.3. WebParts控件: 1 1.4. 登录控件: 1 1.5. Ajax 控件 1 2. jsf 2 3. Apache  ecs 2 4. Custom ui control... 2 5. Struts UI Tags display d

Atitit.列表页面and条件查询的实现最佳实践(1)------设置查询条件and提交查询and返回json数据

1. 1.?配置条件字段@Conditional 1 1 2. 2.?配置条件字段显示类型为[email protected](displayType?=?displayType.rang,?rangStart?=?rang.start,?rangEnd?=?rang.end,op=op.range) 1 3. #----show  condition  page  list 1 4. 提交条件查询表单by dwr 1 5. @filter  ::   set filter condition