我正在网站的标题中使用一种新的谷歌API字体。它叫做Yannone Kaffeesatz,是一种相当紧凑的字体。
我的字体堆栈如下:
font-family: 'Yanone Kaffeesatz', arial, serif;
当Yannone Kaffeesatz字体渲染时,这是很好的,但如果没有,Arial更加开放,标题会跨越两行。
我的问题是:
是否可能根据页面上呈现的字体使用不同的字体大小?
理想情况下支持多种浏览器。
谢谢
汤姆
我正在网站的标题中使用一种新的谷歌API字体。它叫做Yannone Kaffeesatz,是一种相当紧凑的字体。
我的字体堆栈如下:
font-family: 'Yanone Kaffeesatz', arial, serif;
当Yannone Kaffeesatz字体渲染时,这是很好的,但如果没有,Arial更加开放,标题会跨越两行。
我的问题是:
是否可能根据页面上呈现的字体使用不同的字体大小?
理想情况下支持多种浏览器。
谢谢
汤姆
不行,这是不可能的。即使是在JavaScript中,从font-family
列表中找出实际使用的字体也很复杂和困难-在纯CSS中是不可能的。
如果你想走JavaScript的路线, 这里有一个巧妙的方法来检测JavaScript中实际使用的字体系列。
一旦你知道所用的字体,就很容易调整element.style.letterSpacing
到需要的数量。
一个略微根据字体变化字号的属性是font-size-adjust。这是CSS3,只有Firefox支持。
但我认为你不想调整字号,而是调整宽高比,使Arial变窄。挤压字体(例如字母间距)很快就会变得丑陋。相反,您应该从堆栈中选择更紧凑的字体。
http://pieroxy.net/blog/2014/10/11/the_quest_for_a_condensed_web_font.html详细研究了紧凑字体选项。其中一个较棘手的发现是font-stretch: condensed
,例如帮助访问Windows上的Arial Narrow(带Office)。