font-stretch

  • 版本:CSS3
  • 媒体:视觉
font-stretch属性在CSS字体中是比较常用的,本文将带你深入理解font-stretch属性的各个方面,包括它的语法、取值、作用和浏览器兼容性,最后附上font-stretch的演示案例,希望能够对你有所帮助。

font-stretch的详细用法

font-stretch:ultra-condensed | extra-condensed | condensed | semi-condensed | normal | semi-expanded | expanded | extra-expanded | ultra-expanded

默认值normal

适用于:所有元素

继承性:有

动画性:否

计算值:指定值

font-stretch有哪些值?

ultra-condensed:
比正常文字宽度窄4个基数。
extra-condensed:
比正常文字宽度窄3个基数。
condensed:
比正常文字宽度窄2个基数。
semi-condensed:
比正常文字宽度窄1个基数。
normal:
正常文字宽度
semi-expanded:
比正常文字宽度宽1个基数。
expanded:
比正常文字宽度宽2个基数。
extra-expanded:
比正常文字宽度宽3个基数。
ultra-expanded:
比正常文字宽度宽4个基数。

font-stretch的作用是什么?

设置或检索对象中的文字是否横向拉伸变形。
  • 文字的拉伸是相对于浏览器显示的字体的正常宽度。
  • 对应的脚本特性为fontStretch

font-stretch兼容哪些浏览器?

  • 浅绿 = 支持
  • 红色 = 不支持
  • 墨绿 = 部分支持
支持版本\类型 IE Firefox Safari Chrome Opera
版本 6.0-8.0 1.0-8.0 1.0-5.1.7 1.0-31.0 1.0-18.0
版本 9.0 9.0
  1. 已支持font-stretch,但显示效果与正常文字并无不同。

font-stretch的完整演示案例

CSS font-family常见中文字体对应的英文名称

21:28,归类于css相关。阅读241次,今日154次byzhangxinxufromhttp://www.zhangxinxu.com/wordpress/...3月25日

有趣的CSS题目(12):你该知道的字体 font-family

2017/01/06·CSS··分享到:小小的字体其实有大大的学问,可能与字体相关的很多知识都偏设计,不过俗话说技多不压身,艺高人胆大,多了解了解总归没错...1月6日

深入了解CSS字体度量,行高和vertical-align

ign在CSS中是两个简单的属性。如此简单,大多数人都相信自己已经完全理解它们是如何工作的以及如何使用它们。但事实上并不如此。他们其实很复杂,也是CSS中难点之一...2月22日

CSS unicode-range特定字符使用font-face自定义字体

星期六,23:05,归类于css相关。阅读26次,今日26次byzhangxinxufromhttp://www...2016年11月14日

[一勺烩]CSS3中常用字体图标库总结

大小等,不用在搞多张小图片,非常灵活。优点轻松的定义图标的颜色,大小,阴影,和任何与CSS相关的特性。更快的载入速度、样式更容易定义。使用矢量字体...2016年8月7日

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

03:21,归类于css相关。阅读35次,今日32次byzhangxinxufromhttp://www.zhangxinxu.com/wordpress/...2016年7月9日

1.字体系列在css中,我们常通过font-family设定文本字体,且通过font-size,color,font-weight,text-decoration等设置字体的属性...2016年9月15日

css中Font字体小图标应用

以前我们常用的csssprite进行升级了,我们可以直接在css中调用字体了,下面我们来看一篇关于Font字体小图标应用例子。我们知道在页面上载入小图标有多种方式...2016年4月10日

发布于2015-12-07 23:09:07CSS 网络安全字体组合CSS 听觉参考手册CSS 单位常用的字体组合font-family 属性应该使用若干种字体名称作为回退系统...2015年12月7日

发布于2015-09-25 16:44:57一、获取要使用字体的三种文件格式,确保能在主流浏览器中都能正常显示该字体。.TTF或.OTF,适用于Firefox 3.5、Safari...2015年9月25日

e="text/css">body{font-family:微软雅黑,宋体;font-size:1em;color:#f00;}

设置字体的类型、大小... 2015年7月19日

MicrosoftJhengHei为微软正黑体,STHeiti为华文黑体,MingLiu记得11px下的中文有着不凡的效果。在css中推荐使用中文字体的英文表示法,以下附常见中文字体的英文名...2015年6月29日

@font-face {font-family: ;src: [][, []]*...2014年8月4日

FontAwesome奥森图标一套绝佳的图标字体库和CSS框架

字体库和CSS框架(奥森图标)FontAwesome逐浪CMS官方版正式开放啦!免费获取和使用就在:http://code.zoomla.cn/boot/font...2015年1月26日

相对于周围的元素来设置大小允许用户在浏览器中改变文字大小如果你不指定一个字体的大小,默认大小和普通文本段落一样,是16像素(16px=1em)。设置字体大小像素CSS文本:p...2016年10月18日

CSS字体属性

CSS字体:属性描述font简写属性,把所有针对字体的属性设置在一个声明中。font-family设置字体系列。font-size设置字体的尺寸...2015年2月1日

技巧一我们在设置文字的字体时,可以在字体后面添加上大类,这样以便于在低版本的浏览器缺乏字体时找到类似的字体自动更换,字体分为两类,有衬线serif和无衬线sans-serif。举例...1月28日

CSS中的中文字体表达方式_CSS中的中文字体表达方式在写一个网站的样式表的时候,都会不可避免地用到一些中文字体,比如说微软雅黑、黑体等,除非是做英文站,或者说你乐意整站都用浏览器默认的字体...2016年12月5日

CSS3参考手册,全网最新最全的CSS3参考手册,为你呈现最好的CSS3文档CSS3参考手册