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

css设计指南-笔记6

2016-02-22 15:33 549 查看

一.字体

字体系列 font-family

字体名多于一个单词时，加引号

serif       //衬线字体
sans-serif  //无衬线字体
monospace   // 等宽字体（代码体）
cursive     //手写体或草书体
fantasy     //奇幻字体

字体大小 font-size

font-size: 16px     //绝对大小
font-size: .75em    //相对大小
font-size: 75%      //相对大小
font-size: .75rem   //只相对HTML根元素

字体样式 font-style

font-style: italic      //斜体（把正体设为斜体）
font-style: oblique     //斜体
font-style: normal      //正体（把斜体设为正体）

字体粗细 font-weight

最好只用bold、normal

字体变化 font-variant

只有normal和small-caps（使所有小写英文字母变成小型大写字母）

简写字体

必须声明font-size和font-family

所有值必须按照顺序声明

font-weight, font-style, font-variant不分先后
font-size
font-family

font: bold iatlic small-caps .9em helvetica, arial, sans-serif

二.文本

文本缩进 text-indent

设定行内盒子相对于包含元素的起点

字符间距 letter-spacing

单词间距 word-spacing

文本装饰 text-decoration

underline, overline, line-through, none

a {text-decoration: none;}
a:hover {text-decoration: underline;}
//控制链接的下划线

文本对齐 text-align

left, right, center, justify

行高 line-height

font： 1.2em/1.4 helvetica, arial, sans-serif    //与font-size写在一起

不用指定单位

行高平均分布在一行的上方和下方

eg：字体大小12px，行高20px，则文本上方和下方各加4px的空白

行高不叠加（垂直外边距叠加）

文本转换 text-transform

none, uppercase, lowercase, capitalize

capitalize  //每个单词的首字母转换为大写
uppercase   //全部转换为大写
lowercase   //全部转换为小写

垂直对齐 vertical-align

只影响内联元素，块级元素可以将display设置为inline

以基线为参照上下移动文本，常用于上标和下标

三.web字体

//保存在第三方网站上的字体
在<head>标签中添加<link>标签    //使用时需要引号

//保存在自己web服务器上的字体
@font-face {
font-family: "UbuntuTitlingBold";
src: url("UbuntuTitling-Bold-webfont.eot");
src: url("UbuntuTitling-Bold-webfont.eot?#iefix")
format("embedded-opentype"),
url("UbuntuTitling-Bold-webfont.woff")
format("woff"),
url("UbuntuTitling-Bold-webfont.ttf")
format("truetype"),
url("UbuntuTitling-Bold-webfont.svg#UbuntuTitlingBold")
format("svg");
font-weight: normal;
font-style: normal;
}

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

标签：

相关文章推荐

新的分享

章节导航