Tagged

font-face

A collection of 7 posts

font-face

再说iconfont和font-face

前言 简单说完css边框和背景属性,那么今天就轮到css3字体属性值了,网页最最最最最最重要的莫过于内容,但是内容的主体是文字,所以文字才是大头。 乍一看这标题就有很明显的菊(蛋)花(疼)味,假如说我要再重复一遍@font-face泼出去的水又收回来重复利用的属性的话,感觉有点索然无味,大众审美会疲劳。各位看了会嗤之以鼻,不屑一顾!当然了,简单的介绍那是必不可少,比较普及率没有这么高嘛。 iconfont和font-face到底存在什么乱七八糟的事情呢,假如你看过前端观察CSS3 icon font完全指南和小胡子哥再探@font-face及webIcon制作 就会大概的知道其实他们是相辅相成,相互依懒的关系,缺一不可吧。 好吧,调情开始。 初始font-face 每次介绍一次新属性之前,都要把其属性值先简单介绍一下,这样可以让同行加深一下印象,对于@font-face这个属性,mozilla 的语法如下 @font-face { [font-family: <family-name>;]? [src: [ <uri> [format(<string&

font-face

font-face在移动终端的支持

CSS3 font-face特性不多介绍了,可以实现漂亮的自定义字体,更能用将图标转换为字体(font-icon)来实现提高图标的质量并兼容各种分辨率。而font-icon的最佳使用环境是移动终端,因为移动终端的屏幕/显示器一般PPI都比较高,字体显示的非常完美。而移动终端对font-face的支持是怎样的呢? BBC News的Kaelig做了一系列的测试,来检测各个主流移动设备对font-face的支持,貌似并不是很乐观的样子。 由于UC浏览器不支持alert方法,所以kaelig使用了document.write方法来输出支持结果,使用的方法也很简单,用了modernizr.fontface,但是有的浏览器会欺骗你,告诉你它支持font-face,但实际上并不支持,比如Windows Phone 7中的IE9,所以他使用了另一段js来检测实际的情况。感兴趣的可以去看下测试页面。 嗯,实现方法有多种,关键是测试结果: 支持font-face的浏览器 iOS 4——Safari iOS 6——Safari iOS 6——QQ浏览器 iOS 6——UC浏览器 iOS 6——Dolphin Android 2.

font-face

icon font大搜罗

看了上一篇《CSS3 icon font完全指南》之后,你是否也想在自己的项目——特别是移动项目——中小试一把呢?我也一直在找机会show一下这种方法,至少,可以灭了IE6的透明和惨不忍睹的锯齿什么的。今天我们收集国外各种现有的icon font,以给大家提供点儿参考。 免费字体 下面的这些icon font都是免费或者开源的,你可以大胆的使用,但是作为设计师,大家要有点儿修养,在使用前先看看相关字体文件的版权授权方式~~ Font Awesome(150+个) 为配合Twitter Bootstrap使用而设计。其实它是Glyphish的一个免费的重新设计的版本。 Modern Pictograms(89个) 可以在Font Squirrel免费下载,但是如果你愿意,也可以捐款。 Erler Dingbats(~120个) Ecqlipse 2(281个) Heydings Icons(60个) Iconic(171个) Web Symbols(~80个) Entypo(

css3

CSS3 icon font完全指南

大家都知道现在各个浏览器都支持CSS3的自定义字体(@font-face),包括IE6都支持,只是各自对字体文件格式的支持不太一样。那么对于网站中用到的各种icon,我们就可以尝试使用font来实现,本文将详细讲解这种用法。 为什么要将icon做成字体? 在很多网站项目中,我们常常会用到各种透明小图标,然后网站要兼容各个浏览器,也可能会有多个尺寸,甚至还要考虑换肤等需求。那么我们就要将这些小图标输出为多种尺寸、颜色和文件格式,比如png8 alpha透明或者png8 index透明等。 比如,twitter用到的各种小icon: 这种情况下,使用字体来实现图标就有很多优势: 字体文件小,一般20-50kb; 容易编辑和维护,尺寸和颜色可以用css来控制; 透明完全兼容IE6; 如何将icon变成字体? 最关键的是要将设计稿中的icon(要有矢量路径,位图没法转化)完美还原成字体,这并不是很麻烦。 我们要用到一些字体编辑软件,比如FontCreator、FontLab等,这里我们用FontLab来演示。 还原步骤很简单: PSD–>eps–>FontLab,即将PSD转换为illustrator的eps格式,然后将某个字符复制到FontLab中即可。 具体步骤: 打开设计稿psd,将其保存为Photoshop eps格式,我们这里以Qzone中说说发表框的表情icon为例:

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

css

CSS文字排版终极指南

译自:[The Ultimate Guide to CSS Typography](http://www.threestyles.com/tutorials/css-tips-for-better-typography/) 中文:[CSS文字排版终极指南](http://www.qianduan.net/ultimate-guide-css-text-typography.html) 请尊重版权,转载请注明来源!多谢。 - - - - - - 在今天的设计中,排版常常被忽视,特别是被网页设计师忽视。这真是件遗憾的事情因为CSS可以做很多事情来控制我们的排版。也就是说,我们被局限于某些“网络安全”排版,但是我们不应该限制我们自己的创造性。本文整理了一些用于在网页上排版的CSS技巧。 Font属性 CSS提供了font属性,它允许我们在我们的页面中调整文字。这是一系列的关于语法和如何使用CSS调整文字的概述。 Font-size 使用font-size可以修改你的文字的大小。 font-size: 1.2em; font-size:

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.