Tagged

嵌入字体

A collection of 3 posts

个性化

使用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.

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: