文章关键字 ‘font-face’

等宽字体在web布局中应用以及CSS3 ch单位嘿嘿

2016年07月9日,星期六

所谓等宽字体,一般是针对英文字体而言的。东亚字体,据我所知,应该都是等宽的,就是每个字符在同等size下占据的宽度是一样的。但是英文字体就不一定了,就难本文来说,我下面写一个单词,什么呢,就iMac吧,大家打开自己的像素眼,就会很明显地发现这个字符’i’要不其他字符,例如’M’占据的宽度要小.但是,如果是等宽字体,宽度就一样,那么这种表现在web布局中有没有什么作用呢?还有CSS3 ch单位和他又有什么千丝万缕的关系呢?

阅读全文…

改变CSS世界纵横规则的writing-mode属性

2016年04月27日,星期三


writing-mode这个CSS属性,我们是不是很少见到,很少用到!我们往往称不常见的东西为“生僻”,就像是不常见的文字我们叫“生僻字”,因此不常见的CSS属性,我们可以叫做“生僻属性”,writing-mode给我们的感觉就是一个“生僻属性”,很弱,可有可无。

但是,实际上,我们都错了,大错特错,writing-mode很弱?卧槽,别开玩笑了,writing-mode可以说是CSS世界里面最逆天的CSS属性了,直接颠覆CSS世界的众多规则……

本月为4月压轴作品,大量demo,大量脑洞大开的创意处理,希望可以对您的学习有所帮助。

阅读全文…

博闻强识:了解CSS中的@ AT规则

2015年08月6日,星期四

大家可能在CSS中见到过字符@然后加一些关键字的用法,这种用法就称之为AT规则。而本文的内容就是列举目前CSS中支持的或即将支持的一些CSS规则,让大家提前有个大致的了解和认识,希望对日后的工作与学习能够提供一些帮助!

阅读全文…

PSD小图标变身SVG Sprites/font-face历险记

2014年12月2日,星期二

结语摘要:SVG是以后图形领域重要的媒介,如何导出适合开发的SVG图形是设计师必备技能,本文的填色等处理都是比较重要的处理细节;页面仔对图形软件使用不一定很熟,尤其illustrator,本文就拿一个比较复杂的图标举例,演示了如何迁移以及优化SVG路径。实际开发时候,一般的PSD中的小图标路径都是简单正常的,不需要“相减”或“联集”等路径操作。所以,弄清楚了本文的操作,基本上图标SVG变身都不是什么问题。

技术发展,以后肯定会出现PSD一键SVG转换工具的,本文内容就要作古了,或许现在就有,哪位小伙伴有所耳闻的,不妨分享下~~

阅读全文…

SVG图标颜色文字般继承与填充

2014年07月22日,星期二

前文介绍了SVG Sprites身材和内涵,顺大便客观的评价了SVG Sprites比font-face高几层楼的事实(看看外国同行的对比)。但是呢,人总是这样,总是容不得说自己现在使用东西的不好。于是乎,不经意间戳动了点小小的自尊。导致文章也没细读就大肆反驳:SVG图标颜色要内联设置,不像font-face那样好控制!而且还不只一位兄弟这么说。
其实呢,我并不忍心说实话的:SVG图标颜色控制要比font-face有过之而无不及……

阅读全文…

CSS3 box-shadow盒阴影图形生成技术

2013年11月29日,星期五

理论上,CSS3 box-shadow盒阴影可以生成任意的图形,小月格格的靓照,含韵格格的靓照那都不在话下。本文且听后宫茶话会上关于CSS3 box-shadow盒阴影图形生成技术的分享。截图、demo源代码示意,美女靓照一个都不少。说不定,你会有别样的收获哦!【挑眉】

阅读全文…

视网膜New iPad与普通分辨率iPad页面的兼容处理

2012年10月25日,星期四

本文内容多少有点含沙射影,旁击侧敲的味道。题目虽然是将new iPad与普通iPad不能显示屏上的兼容性处理,实际上,讲的是所有视网膜显示屏的一些处理;随着以后普通显示器和视网膜显示器2分天下,就是我们开发的苦日子时候。
既来之则安之,本文先打个预防针,分享点我近期iPad项目的一些处理经验。希望能对其他同行面对同样问题的时候提供一些帮助。

阅读全文…

近期手机网页项目一些杂碎心得分享

2012年08月31日,星期五

其实上上周就可以出此文了,只是,就跟谈恋爱一样的,要讲求时机以及心情。这会儿,看完了海贼王情报,处理了邮件,文章评论以及部分同行靠谱的提问,加上好几天没有动“笔头子”了,于是,很有兴致,分享些杂碎的知识点。
头一次写星星点点知识的分享。不过应该压力不大,貌似不需要什么严谨的逻辑。想到了就说,再堆麻将版摞起来就可以了~~
项目是做移动网页版的内容,从塞班S60到iPhone以及Android手机以及window phone都要支持。采用渐进增强策略,塞班S60布局良好,功能可以正常使用,至于模样嘛,看得过去就可以。
千奇百怪手机,显然,会出现N多让人都无力吐槽的兼容性问题。这里,share下,希望可以为后来者或是正在遇到类似问题的你提供点思路……

阅读全文…

如何灵活利用免费开源图标字体-IcoMoon篇

2012年06月4日,星期一

本文实际上是围绕IcoMoon这个平台介绍的,IcoMoon是为了方便广大前端开发人员使用图标字体而开发的。确实很好用,体验也很好,也非常有实用价值,故介绍。

使用一步一步,有非常详尽的截图,希望本文的内容能够对您的学习有所帮助。

阅读全文…

CSS3 @font-face实现颜色大小可控的三角效果

2011年11月19日,星期六


本文介绍如何使用CSS3 @font-face实现颜色可随意控制,大小可随意控制,支持CSS3文字阴影和文字渐变效果,与文字等天然对齐且兼容性良好的三角的实现。可以说是本月比较重量级的文章,配以大量的截图示意。提供必要的demo页面以及源代码展示,以及一些字体的下载。不管怎样,希望本文的内容能够对您的学习有所帮助。

阅读全文…