在网页开发中使用字体是一个非常重要的部分,它与视觉感受和用户体验直接相关,尤其是在当下移动化的互联网时代,对字体的使用越来越讲究。

一、不同设备的字体表现

以往做PC端页面时,一直喜欢用"Microsoft Yahei","微软雅黑"来作为默认font-family,毕竟是中文字体中比较好看的一种,但是到了移动端,字体的表现就没有那么的’乖巧’了——并不是真正的微软雅黑,而是使用手机默认字体。也就是说IOS和Android系统不支持微软雅黑这种字体,下面是两种手机系统对字体的支持情况:

ios 系统

  • 默认西文字体:Helvetica Neue
  • 默认中文字体:Heiti SC (黑体)
  • 其它常用西文字体:Tahoma、Arial、Verdana、Georgia
  • 不支持微软雅黑字体

android 系统

  • 默认西文字体:Roboto
  • 默认中文字体:Roboto
  • 其它常用西文字体:Arial
  • 不支持微软雅黑字体

这里有一个Demo,可以扫码查看不同设备的字体表现:

mobile-web-font

继续阅读→

阅读全文

上线一周,浏览量(PV)42000+,访客数(UV)11000+,获得校内师生广泛好评。

项目简介

“馆藏记忆”即广东工业大学图书馆2017毕业纪念册,她将毕业生们在大学四年与图书馆之间的故事,以时下流行的移动端H5的形式展示出来。

LOGO-red-white

为毕业生提供图书馆利用报告,制作成“毕业纪念册”,是学校对毕业生们人文关怀的体现,同时也是能让高校图书馆的“读者服务”增色不少的一个重要活动。

这是我们的简版宣传海报,有兴趣的可以扫一扫二维码体验体验:

继续阅读→

阅读全文

移动设备各种规格高清屏的出现,使得PC端常规的px适配方案变得捉襟见肘,在这种情况之下,有针对移动端独立的一套适配方案就显得非常地重要。

第一印象

重度依赖meta标签的viewport和html标签的font-size,配合使用dpr\rem\px

一些概念

1、Retina

“Retina”是“视网膜”的意思,指将更多的像素点缩至同样大小的屏幕里,显示屏的分辨率极高,超越了肉眼分辨单点像素的极限。 Retina技术一开始由苹果公司应用在iPhone4上,由于该技术带来的细腻屏幕显示体验,其它智能手机厂商纷纷仿效,由此引发了一股从普通屏幕到高清屏幕升级的潮流。如今市面上大部分智能手机都搭载了高清显示屏。

2、物理像素(physical pixel)

物理像素也叫设备像素(device pixel),指显示屏中最小的一个物理部件,是屏幕的实际像素

继续阅读→

阅读全文

本打算这本书到图书馆借来看就行,无奈错过了寒假少有的开放日期,后来干脆买了一本回家慢慢看。现在看来,其实借不到书反倒是一件好事,因为买来的书意味着你可以在上面随意涂画——尤其是当你遇到一本好书,读到一个好句子的时候。

848011938235138772d

记得是在读书公众号【书单】上看到的这本书,初见书名《禅与摩托车维修艺术》(Zen and the Art of Motorcycle Maintenance),便觉此书必有新颖脱俗之内容、非同凡响之故事,而后的阅读也没有让人失望,很好地证明了该书为众多书籍所莫能及之良品。

从家乡明尼苏达出发,作者波西格(Robert M. Pirsig)与他的儿子克里斯,骑上他心爱的摩托车一路向西再转南,跨越了大半个美国大陆,最后到达加利福尼亚的旧金山。在这一次漫长的旅途中,他们穿过了草原与沼泽、高原与沙地、还有雪山与峭壁;他们遇到过暴风雨、潮湿、干旱、寒冷等各种天气;他们住过汽车旅馆、有人的家、以及在路边和在山上的露营……这一切都在作者笔下得以细致地描绘出来,读起来饶有趣味,让人宛若身置其中,获得一种非常独特的阅读体验,可以说,这是一部不错的游记作品。

继续阅读→

阅读全文