html5新增字体设置

231 阅读3分钟
新增文字属性:
font-variant:设置文字的大写字母格式,属性值为normal(正常),small-caps:(小型大写字母)
font-transfrom:文字大小写,none(不转换)、cspitalize(首字母大写)、uppercase(全部大写)、lowercase(全部小写)
text-shadow:文字阴影
    color:指阴影的颜色,如果省略制定阴影的颜色,在火狐,欧鹏浏览器中直接使用字体颜色作为引用色,在IE和谷歌中不显示阴影,
    xoffset:阴影在横向上偏移
    yoffset:阴影在纵向上偏移
    radius:阴影的模糊半径,模糊半径越大,阴影越模糊
    eg:text-shadow:red 5px 5px 2px
font-size-adjust:字体微调·
    font-size-adjust属性的值通常应设为字体的aspect的值
    每种字体的aspect的值等于改字体的小写x的高度除以该字体的大小
        例如某字体的大小为100px,该字体的小写高度是58那么该字体的aspect的值为0.58
        每种字体的aspect的值是固定的
    解决移动端最小值12px属性
        -webkit-text-size-adjust:none

text-indent:设置段落缩进,默认为0(被另一个元素断开时不能应用本属性)
text-overflow:用于控制文本溢出的处理方法
    clip:当文本溢出时,clip指定只是简单的裁剪溢出的文本
    ellipsis:该元素指定了overflow:hidden属性值,并且white-space:nowrap:该元素文本溢出时,ellipsis能指定溢出的文本并显示溢出的标记。。。(常用做标题设置,结合white-space使用)
    
    实例:
    <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.contents{
				width: 100px;
				height: 20px;
				border: #f00 1px solid;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}
		</style>
	</head>
	<body>
		<div class="contents">
			乌克兰国防部于北京时间2月25日早上8时许通报了最新战况,称乌克兰军方迄今已经摧毁了超过30辆俄军坦克、130辆装甲战车、战机7架、直升机6架。军方还称,乌克兰海军正在黑海持续与俄军交战,保卫着乌克兰在敖德萨、尤日内和奥恰基夫的基地与港口;空军正在驱逐俄军的空袭,持续用无人机侦察着敌情,并攻击着占据着新茲布里夫卡、库皮安斯克、新卡霍夫卡的俄军,以及戈斯托梅利空域的俄军;另外,称相关部队和措施已经被重新部署到了基辅进行防御。“稳住,我们能赢”,乌克兰军方称。
		</div>
	</body>
</html>

direction:设置文本流入方向,ltr(从左向右)rtl(从右向左)
wiord-break:设置目标组件中文本内容对空格的处理方式
    normal:浏览器规则内进行换行,默认
    keep-all:只能在半角空格或连字符处换行
    breakm-all:设置允许在单词中间换行
white-space:用于设置目标组件对文本内容对空格的处理方式
    normal:自动换行,默认
    nowrap:强制在同一行内显示所有文本,直到遇见br
word-wrap:用于设置目标组件中文本内容的换行方式
    normal:靠浏览器的默认规则进行
    break-word:设置允许在单词中间换行