移动端页面应该使用什么字体?

设计师们通常喜欢用微软雅黑作为中文字体进行设计,于是我写页面的时候也定义font-family为微软雅黑,后来发到线上后,发现页面的字体不是微软雅黑,后来了解到的手机系统 ios、android 等是不支持微软雅黑字体,为了满足页面需要,保证视觉稿的还原度,手机端是如何定义微软雅黑字体呢?

相信大家会想到 @font-face 定义为微软雅黑字体并存放到 web 服务器上,在需要使用时被自动下载。

@font-face {
font-family: ‘MicrosoftYaHei‘;
src: url(‘MicrosoftYaHei.eot‘); /* IE9 Compat Modes */
src: url(‘MicrosoftYaHei.eot?#iefix‘) format(‘embedded-opentype‘), /* IE6-IE8 */

url(‘MicrosoftYaHei.woff‘) format(‘woff‘), /* Modern Browsers */
url(‘MicrosoftYaHei.ttf‘) format(‘truetype‘), /* Safari, Android, iOS */
url(‘MicrosoftYaHei.svg#MicrosoftYaHei‘) format(‘svg‘); /* Legacy iOS */
}

字体问题虽然解决了,但也带来了影响,一来消耗用户的流量,二来对页面的打开速度造成了延迟。总感觉不好,随后找了三大手机系统的字体资料:

ios 系统

  • 默认中文字体是Heiti SC
  • 默认英文字体是Helvetica
  • 默认数字字体是HelveticaNeue
  • 无微软雅黑字体

android 系统

  • 默认中文字体是Droidsansfallback
  • 默认英文和数字字体是Droid Sans
  • 无微软雅黑字体

winphone 系统

  • 默认中文字体是Dengxian(方正等线体)
  • 默认英文和数字字体是Segoe
  • 无微软雅黑字体

可以发现无论是ios、android还是wp系统中都是没有微软雅黑字体的,随后做了一个小测试,就是将微软雅黑字体的效果和各个系统默认字体的效果做了一下对比,发现无论页面中使用哪种字体,肉眼很难看出它们的差异,对产品的体验几乎没有影响。

结论:

    1. 各个手机系统有自己的默认字体,且都不支持微软雅黑。
    2. 如无特殊需求,手机端无需定义中文字体,使用系统默认。
    3. 英文字体和数字字体可使用 Helvetica ,三种系统都支持。
时间: 2024-10-12 21:27:38

移动端页面应该使用什么字体?的相关文章

html5移动端页面分辨率设置及相应字体大小设置的靠谱使用方式

对于动端网页编写CSS网上有很多介绍的文章,但在实际使用过程中还是会纠结. 网上的资料太多,且大多都是技术介绍型,特别是针对android上,网上写的各种麻烦,各种复杂,各种不接地气儿... 我在做移动端网页时,总是和美工设计的页面有出入,主要还是由于双方对移动端HTML5实现页面还了解还不够. 今天就研究一下各大互联网公司对于移动端页面的处理方式. 主要研究对象:BAT(度娘,阿狸,企鹅)这几家的移动端网站或webapp 主要研究点:viewport的设置,字体的设置,图片原始宽高设置 汝甚吊

移动端页面开发

移动端页面开发 移动客户端的开发类型(站在前端立场上来说),主要是三种:Native App(原生APP),也就是完全使用移动设备系统语言写的客户端,iPhone iPad就是纯Object-C,安卓就是纯JAVA, 是性能最棒的开发方式,但灵活性不好.Web App, 就是在移动浏览器里打开的,纯HTML+CSS+JS,说白了就是个网页,只不过非常的富应用,比如手机浏览器访问的GMAIL.就是在浏览器里打开的页面.IOS支持可以在桌面创建访问的快捷方式,但是说到底还是打开Safari跑.而且对

移动端页面布局的那些事儿

移动端页面布局的那些事儿 http://www.xiaoxiangzi.com/Programme/CSS/4298.html 一. viewport 什么是viewport 简单来讲,viewport就是浏览器上,用来显示网页的那一部分区域了,也就是说,浏览器的实际宽度,是和我们手机的宽度不一样的,无论你的手机宽度是320px,还是640px,在手机浏览器内部的宽度,始终会是浏览器本身的viewport.如今的浏览器,都会给自己的本身提供一个viewport的默认值,可能是980px,或者是其

移动端页面适配,rem布局

移动端页面适配 em 根据元素自身的字体大小来计算自己的尺寸 rem root em 根据根节点(html)的字体大小来计算自己的尺寸 适配: 各个移动设备,分辨率大小不一致,使我们的页面在各种分辨率下都显示完好(等比的缩放); 根据屏幕的分辨率 动态的设置html的字体大小,来达到页面等比缩放的功能 注意:保证html最终算出来的字体大小 不能小于 12 在最开始先设置一段js代码,获得屏幕宽度,这段js优先于任何css和js <script> (function() { var html

移动端页面 css reset

这个是通用的  css reset.这个版本适用于 移动端页面 如果需要在 PC端使用,可以 修改 html{font-size: 10px;}为html{font-size: 12px;} 其他地方不需要修改 ========================================= @charset "utf-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, block

移动端页面开发总结[摘录]

1.浏览窗口宽带等于设备宽度 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 2.禁止数字识别为电话号码 <meta name="format-detection" content="telephone=no"

淘宝——移动端页面终端适配

注:本文参考自:http://www.cnblogs.com/xianyulaodi/p/5533201.html 阅读目录 适配的要求 适配的方法,3个步骤 适配中背景图片的处理 适配的原理解析 摘要:在进行移动端界面的书写的时候,如果把宽度高度或者字体大小全部写死的话,那么在所有手机上看到的大小都一样,存在的问题就是同样大小的字体,或者一个盒子模型, 在大屏幕手机上看起来会有点偏小.比如iphone6PLUS.如果是做成适配的话,就很好的解决了这个问题,大屏幕显示的内容大一点,小屏幕显示的小

移动端页面开发的一些常用的设置

viewport 视口(可视区窗口)设置详解 当我们试图在iPhone中输出屏幕宽度的时候,会发现屏幕宽度是980,居然和pc屏幕宽度差不多大 苹果主导的这些手机厂商,为了使用户获得完整的WEB体验,很多设备都会欺骗浏览器返回一个数值较大的视口,告诉浏览器,别以为我身子小,但是我想以980px宽度显示这个页面(分辨率和视口没有关系(开发中根据视口来算的)) 视口对于我们实现响应式是很不方便的.980太大了,不符合我们心中的期待,我们心中认为手机屏幕尺寸应该在320到400之间 默认不设置view

HTML在移动端页面设计是touch事件注意事项

HTML在移动端页面设计是touch事件注意事项 移动端touch事件 当用户手指放在移动设备在屏幕上滑动会触发的touch事件•touchstart——当手指触碰屏幕时候发生.不管当前有多少只手指•touchmove——当手指在屏幕上滑动时连续触发.通常我们再滑屏页面,会调用event的preventDefault()可以阻止默认情况的发生:阻止页面滚动•touchend——当手指离开屏幕时触发•touchcancel——系统停止跟踪触摸时候会触发.例如在触摸过程中突然页面alert()一个提