您的位置：首页 > Web前端 > CSS

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

2015-12-29 14:23 429 查看

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）

怎么权衡呢？一般情况下可以这么指定：

先指定(推荐small或medium)作为<body>中字体的大小。这相当于页面的默认字体大小。
使用em或%来设定h1,h2……

字体粗细

font weight:normal/bold;

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

字体斜体

font-style:italic/oblique;

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

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

为什么不是<em>？
注意<em>是html用来指定结构的，表示一些文字需要强调。<em>的样式可能会改变，
所以不能依靠它来实现斜体。

段落缩进
text-indent:50px;

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

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

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

word-spacing:50px;单词间距

段落对齐

text[b]-align:center/right/left;
[/b]

f

f

t

te

tex

text

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航