CSS字体选择,字体大小,粗细,斜体,缩进,文字单词间距

CSS字体选择


先用@font-face创建要使用的字体


然后在要使用font-family的<h><body>中引用font-family


使用Web字体缺点:获取字体需要一定时间,管理多个字体也挺麻烦,然后移动设备,小型设备并不支持web字体,所以设计中要考虑候选字体



引用失败的几个原因:

  • 地址中使用\而不是/
  • 引用字体没有用""
  • 字体地址和html是否在同一个文件夹没啥关系


可以使用@font-face定制多个字体。每种字体需单独创建一个@font-face规则l

※常用的内置CSS规则

@font-face

@import允许导入其他CSS文件(而不是HTML通过<link>链入)

@media



CSS字体大小 


font-size:px,%,em;

也可利用 xx-small,x-small,small,medium,large,x-large,xx-large

px像素告诉浏览器字幕高度。 格式如

body{

font-sze:14px;

}

(字母的最低部分和最高部分间有14像素)

由于font-size是从父元素继承的一个属性,%就指定了字体相对于父元素的大小。格式如

body{

font-sze:14px;

}

h1{

font-sze:150%;

}

(h1大小是body的150%)

em类似百分数,但指定的是比例。格式如

body{

font-sze:14px;

}

h1{

font-sze:150%;

}

h2{

font-sze:1.2em;

}

  (h2大小是body的1.2倍,即1.2*14px,浏览器四舍五入为17px)

怎么权衡呢?一般情况下可以这么指定:
  1. 先指定(推荐small或medium)作为<body>中字体的大小。这相当于页面的默认字体大小。
  2. 使用em或%来设定h1,h2……


字体粗细

font weight:normal/bold;

或者 100-900(100的倍数)该特性未得到字体,浏览器广泛支持,通常不用。


字体斜体

font-style:italic/oblique;


两种风格看起来一样。但除非你能控制用户使用的字体和浏览器,否则不论指定哪个,结果都不确定。

可能是斜体italic,也可能是倾斜文本oblique. 所以放开手脚用吧。。有问题再说

为什么不是<em>?

注意<em>是html用来指定结构的,表示一些文字需要强调。<em>的样式可能会改变,

所以不能依靠它来实现斜体。


段落缩进

text-indent:50px;


字母/文字间间距  单词间距设置

中文字间隔、字母间隔设置:

letter-spacing:50px;字母与字母,汉字与汉字间距 

word-spacing:50px;单词间距 



段落对齐

text-align:center/right/left;




f
f
t
te
tex
text
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值