css3 font-stretch属性文字变宽或变窄

原创 国哥笔记  2019-02-09 18:58  阅读 674 views 次

font-stretch属性定义及用法

在css中,font-stretch属性是使用来使文字变宽或变窄,目前主流浏览器都还不支持该属性;

font-stretch属性语法格式

  1. css语法:font-stretch:wider/narrower/ultra-condensed/extra-condensed/condensed/semi-condensed/normal/semi-expanded/expanded/extra-expanded/ultra-expanded/inherit;
  2. JavaScript 语法:object.style.fontStretch="expanded"

font-stretch属性值说明

  • wider:使得文本更宽;
  • narrower:使得文本窄;
  • ultra-condensed:使文本窄得不能再窄;
  • extra-condensed:指定紧缩程度第二大的字体;
  • condensed:指定略微紧缩程度第二大的字体;
  • semi-condensed:指定略微紧缩的字体;
  • normal:指明字体既不紧缩也不加宽;
  • semi-expanded:指定略微加宽的字体;
  • expanded :指定加宽的字体;
  • extra-expanded:指定加宽程度第二大的字体;
  • ultra-expanded:指定加宽程度最大的字体;
  • inherit:指定该属性与元素父项的属性采用相同的计算值;

实例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css3 font-stretch属性文字变宽或变窄</title>
<style type="text/css">
#div1 {font-stretch:condensed;}
#div2 {font-stretch:expanded;}
</style>
</head>
<body>
<div id="div1">font-stretch:condensed;</div>
<div id="div2">font-stretch:expanded;</div>
<div>目前主流浏览器都还不支持该属性</div>
</body>
</html>

运行结果:

目前主流浏览器都还不支持该属性

 

更多css属性请移步到——>css属性大全

本文地址:https://www.ggbiji.com/font-stretch.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情