Tagged

字体

A collection of 9 posts

webapp

关于webapp中的文字单位的一些捣腾

写完之后发现,这篇破文章用的图片比较多,假如流量不多的童鞋,看到这段文字马上按返回键,回家开电脑再看,高帅富者直接忽略。 前言 文字是网页内容的一枚大将,我们无时无刻都在看着它,只要是你盯屏幕上的任何一个地方都会有文字。地铁上无时无刻都在盯着屏幕上的人对于文字更为敏感,太大不行,太小TN又看不清上面到底在说什么,有时候车一晃完全是蛋疼的货。下面一篇文字就是针对webapp的文字做了一些小捣腾,肯定有很多不足的地方,欢迎补充。 有必要了解一下我们所常见的数值。 关于单位 对于webapp上文字用什么单位的问题,一直以来都是让我们csser头疼的问题,公说公有理,婆说婆有理。有人说px好,有人说em自适应,有的说百分比牛逼,rem文字出来就跟风说目前最好的就是rem单位。不管是什么说,我们还是要实地捣腾一下。 相对PC端,我们基本要做的就是根据设计图设计出来的文字大小,PS上是什么字体大小我们就直接在css控制文字的大小,基本都是以px像素为单位的,当然除了自适应页面的文字需要特别使用em或者rem外。所以对于pc端只要不涉及到自适应页面,我们通常的做法就是px通吃,一个字“爽”。 pc端中的px像素单位是针对电脑屏幕来说的一个单位,对于桌面上来说,衡量屏幕尺寸的就是分辨率了,1920*1280的分辨率屏幕,横向就是1920像素,纵向1280个像素点(高清屏没研究过),那我们设置一个字体样式 font-size:12px 计算得出来的应该是相对于电脑屏幕分辨率的12个单位长度,

Helvetica

【helvetica】字体纪录片

这两天看到一个视频,是关于知名字体Helvetica的纪录片,觉得蛮赞,推荐给大家。好吧,我是Helvetica字体的狂热粉丝。。。 视频是07年拍的,然后2007年对helvetica来说是很有意义的一年:字体诞生50周年,然后这一年其母公司被其抄袭者——生产Arial字体的Monotype公司收购,感觉好讽刺啊! 但Helvetica依然是永恒的,你走在大街上,看到的英文字体,依然最多的是Helvetica字体,它的简洁、直接,会让你一眼就能够识别它所要表达的内容。 然而这个影片不仅仅是讲Helvetica字体,其关于字体设计和信息传达方便的思考,更值得我们学习。 可能你会问,为什么前端观察会发这个?因为不懂视觉设计的交互设计师不是好的前端开发工程师:P 扩展阅读: 维基百科:Helvetica 說 Helvetica 和 Arial 豆瓣电影:Helvetica

Chrome

mac下网页中文字体优化

最近某人吐槽某门户网站在mac下chrome字体超丑,然后发现虽然现在mac用户越来越多,但是大家依然无视mac下的字体差异,于是研究了下mac下网页中的中文字体,和大家分享。 看了一遍国内各大门户和SNS网站,虽然可能大家的font-family设置都不太一样,但是貌似现在只有QQ空间对mac下字体做了优化。 ok,言归正传。 mac和windows自带的字体非常不一样,所以,针对windows的font-family设置一般不适用于mac系统,而在mac下,会调用系统默认的细黑体(STXihei),而这个字体渲染的其实并不是很好看。 优化的方法有两个: 方案一:使用Hiragino Sans GB字体 关于Hiragino Sans GB Hiragino Sans GB 是衍生自 Hiragino Kaku Gothic(ヒラギノ角ゴ)的简体中文字体 [1],近乎完美地继承了原型的风格,有很微妙的喇叭口,弧线柔美、内敛,字面宽大程度合理。这是一款清新的专业印刷字体,小字号时足够清晰,大字号时又不会「细节欠奉」(via http://www.zhihu.com/question/

大字体

45个网页中创意的大字体设计

中文:[45个创意的大字体设计](http://www.qianduan.net/45-creative-examples-of-large-typography-in-web-design.html) 译自:[45 Creative Examples of Large Typography In Web Design](http://www.onextrapixel.com/2011/09/08/45-creative-examples-of-large-typography-in-web-design/) 请尊重版权,转载请注明来源,多谢!- - - - - - 排版的历史可能和人类一样悠久。大字体可以迅速吸引网站访问者的注意力。所以在网页设计中,选择正确的字体被认为是最重要的一个工作。事实上,设计可以被词语的力量所颠覆。大字体已经成为网页设计是最喜爱的工具了,因为它可以“大声”的传递他们的信息从而激发用户的体验。大字体可以用于网页中的任何地方,它在页面头部的时候通常看起来很酷,而用于文字的时候就会显得很华丽,或者用于结尾的时候甚至可以作为一种视觉的增强。这里我们又收集了很多使用大字体所创造的很赞的布局。

字体

网页中的大字体设计

原文:[网页中的大字体设计](http://www.qianduan.net/huge-typography-in-web-design.html) 译自:[55 Examples of Huge Typography in Web Design](http://webdesignledger.com/inspiration/55-examples-of-huge-typography-in-web-design) [30 Examples of Big Typography in Web Design](http://webdesignledger.com/inspiration/30-examples-of-big-typography-in-web-design) 原作者:Gisele Muller 请尊重版权,转载请注明来源! - - - - - - 大大的字体设计是一个很好的展示网站特色的方法,它通常可以很好的向用户传达网站信息,一目了然,并给人印象深刻。

Google font api、web font与中文
font api

Google font api、web font与中文

Google昨天在Google I/O大会上发布了一个新的服务 Font API,这是一个很酷的东东,可以让我们很方便的使用网络字体,而且这些字体都是免费的,你无需担心版权的问题。 Google Font API使用起来也非常方便,从下面的例子中可见一斑: @font-face { font-family: 'Tangerine'; font-style: normal; font-weight: normal; src: local('Tangerine'), url('http://themes.googleusercontent.com/font?kit=_jMq7r9ahcBZZjpP8hftNA') format('truetype'); } 嗯,看起来与普通的web-font定义并无二样,只是url资源使用Google Font API库中的字体。 相对于其它的网络字体服务,Font API有以下优势(与Ajax API类似): 节省自己的流量; 快速,稳定。 欲了解更多,可以查看这个快速指南。 其实关于网络字体,我们之前也有简单的讨论,

图标

圣诞节设计资源大收集:纹理、笔刷、矢量、图标和字体

译自:[The Ultimate Christmas Round-Up: Patterns, Brushes, Vectors and Fonts](http://www.noupe.com/design/the-ultimate-christmas-round-up-patterns-brushes-vectors-and-icons.html) 中文:[圣诞节设计资源大收集:纹理、笔刷、矢量、图标和字体](http://www.qianduan.net/ultimate-christmas-round-up-patterns-brushes-vectors-fonts-icons.html) 请尊重版权,转载请注明出处,多谢!!!! - - - - - - 又到年终了,大家都很忙。一天24个小时已经不够用了。而且,不幸的是,圣诞节是一个重要的节日。是时间和家人在一起,是时候给朋友们和特别的人准备礼物了,参加聚会和排队,同时也是无法避免的空气中充满了美味的餐具的时刻。只是在这么短的时间内,有太多的诱惑和事情去做。

免费

10款有趣的免费字体

原文:[10款有趣的免费字体](http://www.qianduan.net/10-interesting-free-fonts.html) 译自:[10 Interesting fonts for web designers](http://woork.blogspot.com/2009/06/10-interesting-fonts-for-web-designers.html) 版权所有,转载请注明出处,多谢!- - - - - - 最近Woork收集了一批有趣的字体,它们可以为你的新网站或设计项目提供某些灵感。看一下这10个漂亮而且**免费的** 字体,你可以将它们下载并在自己的商业或非商业项目中使用。 【更新】因为原字体存放的网站Box.net由于XXX的原因被GFW封掉了,所以目前大家不能直接下载,不过可以以适当的方式翻墙下载。当然,如果你不想翻墙,我已经翻墙将相关文件下载了下来,你可以在本站**打包下载**。 1. 7

css

CSS3系列教程:嵌入字体/网络字体

想要制作一些很酷的头部效果而且摆脱网站安全字体并且不使用图片文件?那么就使用CSS3嵌入字体吧! 要使用一款字体,我们首先需要使用‘@font-face’属性。这必须先准备好我们要用的字体文件。 尽管这样,让我们简单的学习一下字体方面的历史。@font-face属性从CSS2就已经考虑了,但却始终在CSS2.1中还没有出现。CSS3尝试经它带到标准中来。 如果你手上没有字体文件,你可以在dafont.com下载一些。 跨浏览器兼容性 目前只有Safari支持@font-face特性(Google Chrome开发版 2.0.156+也支持这个特性)。 所有浏览器都支持font-face。 CSS3嵌入字体 上面的效果可由下面的样式实现: @font-face { font-family: qianduanNet; src: url("SketchRockwell.ttf"); } .fontFace{ font-family: qianduanNet; font-size: 3.2em; letter-spacing: 1px; text-align: center; } 我们也可以对使用font-face的地方使用阴影效果。 .fontFaceShadow{ font-family: