移动Web字体的使用
在网页开发中使用字体是一个非常重要的部分,它与视觉感受和用户体验直接相关,尤其是在当下移动化的互联网时代,对字体的使用越来越讲究。
一、不同设备的字体表现
以往做PC端页面时,一直喜欢用"Microsoft Yahei","微软雅黑"
来作为默认font-family
,毕竟是中文字体中比较好看的一种,但是到了移动端,字体的表现就没有那么的'乖巧'了——并不是真正的微软雅黑,而是使用手机默认字体。也就是说IOS和Android系统不支持微软雅黑这种字体,下面是两种手机系统对字体的支持情况:
ios 系统
- 默认西文字体:Helvetica Neue
- 默认中文字体:Heiti SC (黑体)
- 其它常用西文字体:Tahoma、Arial、Verdana、Georgia
- 不支持微软雅黑字体
android 系统
- 默认西文字体:Roboto
- 默认中文字体:Roboto
- 其它常用西文字体:Arial
- 不支持微软雅黑字体
这里有一个Demo,可以扫码查看不同设备的字体表现:

继续阅读→
阅读全文
“馆藏记忆”项目“总结”——技术篇
好吧其实不算总结,只是偷懒地列个大纲:)
本项目从3月开始进行研发策划,到6月8日正式发布上线,用时两个多月。
继续阅读→
阅读全文
移动端高清屏适配方案
移动设备各种规格高清屏的出现,使得PC端常规的px适配方案变得捉襟见肘,在这种情况之下,有针对移动端独立的一套适配方案就显得非常地重要。
第一印象
重度依赖meta标签的viewport
和html标签的font-size
,配合使用dpr\rem\px
。
一些概念
1、Retina
"Retina"是“视网膜”的意思,指将更多的像素点缩至同样大小的屏幕里,显示屏的分辨率极高,超越了肉眼分辨单点像素的极限。 Retina技术一开始由苹果公司应用在iPhone4上,由于该技术带来的细腻屏幕显示体验,其它智能手机厂商纷纷仿效,由此引发了一股从普通屏幕到高清屏幕升级的潮流。如今市面上大部分智能手机都搭载了高清显示屏。 
2、物理像素(physical pixel)
物理像素也叫设备像素(device pixel),指显示屏中最小的一个物理部件,是屏幕的实际像素。

继续阅读→
阅读全文