关注联楷|返回首页 | 网站案例 | 帮助中心

合作共赢、快速高效、优质的网站建设提供商

上海网站建设 

服务热线:021-61394118

上海联楷科技

再谈如何创建网站字体属性

作者:佚名   时间:2014-03-14   分享到:

再谈如何创建网站字体属性

创建网站字体属性如果没有过多的细节,字体的易读性和显示大小主要依靠它的纵横比(aspectratio)也就是其显示大小相对于x-height的比例,其中x-height是字体小写字形高度的测量值。纵横比接近1.0的字体与纵横比接近0的字体相比,前者更容易阅读。同时,由于纵横比的影响,一种字体的实际显示大小可能会明显大于或小于同一大小的其他字体。因此,当有一种字体不能用来显示时,替代字体可能会歪曲所要表达的意思。 字体font-size-adjust属性

font-size-adjust属性允许我们重新调整替代字体的纵横比,这样它可以更符全显示效果。使用属性值none可忽略纵横比。要不然就包含所需要的纵横比(一个小于1的十进制),一般情况下是首选显示字体的纵横比。然后,能够识别样式的浏览器装饰会以指定的纵横比计算和显示替代字体的大小: s=(n/a)*fs

其中“s”是显示替代字体时新的计算机字体大小,其计算方法如下:font-size-adjust的值“n”除以替代字体的纵横比“a”,乘以当前字体大小“fs”。

例如,让我们想你一下,首选字体是纵横比为0.45的Tinies New Roman。如果该字体目前不可用,浏览器会替换为纵横比为0.54的Comic Sans MS 字体。这次替换几乎保持了相同的字体显示大小——假设为18-px大小,而font-size-adjust属性被设置为0.45,兼容CSS2的浏览器将以替代的Comic Sans MS字体显示或打印文本,其字体大小相对于18px小一些,为(0.45、0.54x 18px)=15px。 遗憾的是,我们无法展示流行浏览器的处理方式,因为它们不支持这个属性。 font-style属性

使用font-style属性可使文本倾斜。默认样式为normal,可以改变成italic或oblique。例如: h2{font-style:italic}

将以斜体显示所有二级标题的文字。老版本的浏览器只支持italic作为font-sytle属性的值,新的浏览器及以后的版本都会支持这两个值,然而通常很难区分italic和oblique。 font-variant属性

使用font-variant属性可以选择所需字体的某种变形。这个属性的默认值是normal,表示字体的常规版本。也可以指定small-caps来选择字体的一个版本,在这个版本中,小写字母都会被替换为小的大写字母。 font-weight属性

font-weight属性控制着书写字母的粗细。这个属性的默认值是normal。也可以指定bold来得到字体的粗体版本,或者使用bolder和lighter值来得到比父元素字体更粗或更细的版本。要指定细或粗的不同等级,可以将值设置为100(最细)到900(最粗)之间100的倍数。值400等于字体的normal版本,而700就与指定为bold的效果一样。 font属性

有时,我们在平时的网站制作中会发现自己同时为一个标签的文本内容显示指定了多了与字体相关的属性。完整的字体规范使用起来可能有一些不便。例如:

p{font-family: Times,Garamond,serif; font-weight: bold; font-size: 12pt; line-height: 14pt}

为了减少这种麻烦,并避免出现难以辨认的情况,应该使用易于理解的font属性,然后把所有属性组成一个声明的集合:

p{font:bolld 12pt/14pt Times, Garamond,serif}

字体属性的分组和排序在font属性中是很重要的。必须首先指定字体系列列表结束。在所有属性中,字体大小和字体系列是必需的;其他的则可以省略。 下面是更多font属性的示例:

em{font:italic 14pt Times} h1 {font:24pt/48pt sans-serif} code {font:12pt Courier,monospace}

第一个示例告诉能够识别样式的浏览器,要用14磅、斜体的Times样式来强调<em>文本。第二条规则用最粗的24磅sans-serif字体来显示<h1>文本,而且文本的行距也为24磅。最后,<code>标签内的文本被设置为12磅的Courier字体,或是浏览器定义的等宽字体。

关于创建网站的字体样式可以实现的效果,则留给读者自己去想像了。也许最新一期的wired杂志在这方面会有所帮助,可以找到比较前卫的字全和其他与输出有关的用法。



如没特殊注明,文章均为上海联楷网络原创,转载请注明来自:http://www.linksj.com/news/20151229/n6659.html

上海联楷网络新闻