文章关键字 ‘font’

小tips: JS字体加载失败或完毕的检测

2022年04月27日,星期三

font 字体封面图占位图

如何判断 CSS @font-face 规则中的字体是否加载结束,是否加载成功?本文提供的方法你一定喜欢。

阅读全文…

ascent-override descent-override line-gap-override一锅端

2022年03月21日,星期一

破茧成蝶

@font-face 自定义字体的又新增了一些新属性,进来看看都是干嘛用的吧,说不定可以解决你的超级棘手的难题!

阅读全文…

分享三个纯CSS实现26个英文字母的案例

2019年01月11日,星期五

本文展示三个CSS生成26个字母的案例,旨在展示CSS在图形绘制方面的潜力,同时这些案例也是非常好的CSS图形绘制学习材料。希望本文内容对您的学习有所帮助。

阅读全文…

CSS font-feature-settings 50+关键字属性值完整介绍

2018年12月9日,星期日

CSS font-feature-settings

CSS font-feature-settings属性控制OpenType字体中的高级排版功能,也就是可以让OpenType字体排版更加精致,符合实际开发需要。

兼容性很不错,支持的特征关键标签也很多,都是4个字母,全部加起来,可能上百要的,本文主要介绍浏览器能够支持的一些特征标签。

阅读全文…

了解woff2字体及转换

2018年07月25日,星期三

文章头图

woff字体在2012年12月被World Wide Web Consortium (W3C)推荐使用,IE9+浏览器支持。woff2字体最早在在2013年7月Chrome Canary版本上可以使用,发展到现在,几乎已经成为自定义图标字体使用的标配。

本文就将介绍关于WOFF2诸多基础知识,包括优点特性,如果TTF字体转WOFF2字体,如何在CSS中使用,mime type设置等,有截图有必要的源代码展示。希望本文内容能够对您的学习有所帮助。

阅读全文…

真正了解CSS3背景下的@font face规则

2017年03月30日,星期四

很多人只要一提到@font face规则,心中就会不由自主“哦~~”的一声:“这个我知道,可以用来生成自定义字符小图标!”话是没错,问题在于很多人就以为生成字符小图标就是@font face规则的全部,实际上只是功能之一,如果真正了解@font face规则,你会发现,@font face规则可以做的事情其实非常多,尤其我们不考虑IE7,IE8浏览器的情况下……

阅读全文…

了解CSS属性font-kerning,font-smoothing,font-variant

2017年02月23日,星期四

本文很简单,了解几个可能平时用得不太多,长得不太熟的font相关的几个CSS属性,分别是:font-kerning, font-smoothingfont-variant

阅读全文…

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

2016年07月9日,星期六

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

阅读全文…

CSS font关键字属性值的简单研究

2016年01月27日,星期三

ont属性值除了支持常用的缩写,还支持系统关键字,这种用法在某些场景下非常的有用。本文就带你前去一探究竟。有demo有源代码有截图,希望本文的内容能够对您的学习有所帮助!

阅读全文…

翻译:CSS中的糟粕

2012年03月21日,星期三

下午本文节选:
每种程序语言都有其精华与糟粕的部分。CSS(我知道,CSS不是程序语言,但又何妨?)也不例外。

本文我除了发牢骚还是发牢骚。我已经给网站敲代码敲了12年了,其中有一半的时间是在折腾CSS布局(没错,哥我大器晚成)。我想到要去认识到CSS中的精华与糟粕,而这里,我要讲的是”糟粕”……

基本上都是文字,有兴趣的你可以看看~~

阅读全文…