Tagged

网络字体

A collection of 3 posts

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类似): 节省自己的流量; 快速,稳定。 欲了解更多,可以查看这个快速指南。 其实关于网络字体,我们之前也有简单的讨论,

个性化

使用TypeSelect实现嵌入字体

网站的设计已经越来越偏向个性化了,大家都在想方设法的实现独特的网站风格,嵌入字体/网络字体是达到这一目标的方法之一。而之前,我们在《如何在网页设计中使用个性化字体》中有介绍过typeface.js,它可以很方便的将个性字体嵌入到网页中,并且具有良好的兼容性,从而可以弥补@font-face的不足。但是typeface有个不足——使用typeface的字体不能被选中,这显然会影响网站的用户体验。 现在好了,已经出来了一个非官方的解决方案:Type Select。 TypeSelect事实上是定制了typeface的某些方法,但同时需要jQuery库的支持,用法和typeface是一样的: 在页面的头部加载以下js文件: 然后在页面或CSS中定义你要嵌入的字体名称: HTML中: Your Text CSS中: h1 {font-size: 55px; font-family: Nilland, Times; font-weight: normal; font-style: normal;} 请注意以下事项: 你需要给使用指定字体的元素指定一个”select”类,也就是class=”select”; 你不需要再使用原始的typeface.js文件,而需要使用typeface-custom.js; 该效果不支持Opera浏览器;

cufon

如何在网页设计中使用个性化字体

一个常常令设计师和前端开发人员都头疼的事情就是字体的使用,设计师常常在设计稿中使用某些很漂亮的字体,以实现比较酷炫的界面。但这样常常给编码人员造成一些难度,如果在页面中放弃使用这些字体,设计师会感到郁闷,而如果使用这些字体的话,就要切图并使用很多额外的样式——又一个鱼和熊掌的抉择。还好,现在已经有了一些相关的替代技术了。 1. @font-face CSS3的@font-face属性(事实上CSS2中就已引入),为我们带来了一些希望,而Firefox 3.5新增的对@font-face的支持,让我们离这个希望更进了一些。 到现在为止,已经有Safari、Chrome、Opera 10和Firefox 3.5支持@font-face了,比较意外的是,IE系列浏览器也部分支持该属性。Mozilla旗下的其它产品,SeaMonkey 2 和Thunderbird 3 也支持该属性。 浏览器兼容性 浏览器最低版本支持字体Internet Explorer**4.0**只支持OpenType字体(eof格式)Firefox (Gecko)**3.5** (1.