css字体
1.字体分类
SERIF:衬线字体。在字母的主要笔画末端有额外装饰。适合长篇文本
SANS_SERIF无衬线字体。文本小的时候运用
MONOSPACE等宽字体。每个字母宽度相同。用于显示代码
CURSIVE:草书字体
FANTASY虚幻字体，用于标题。不适合长篇文本
2.字体选用font-family
<style type="text/css">
body {
font-family: Georgia, Times, serif;}
h1, h2 {
font-family: Arial, Verdana, sans-serif;}
.credits {
font-family: "Courier New", Courier, monospace;}
</style>
3.字体大小font-size
<style type="text/css">
body {
font-family: Arial, Verdana, sans-serif;
font-size: 12px;}
h1 {
font-size: 200%;}
h2 {
font-size: 1.3em;}
</style>
像素，百分数，em。
chrome默认大小16px,最小12px.可调整
pixels/16=em
Responsive Font Size
The text size can be set with a vw unit, which means the "viewport width".
ThaViewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.t way the text size will follow the size of the browser window:
Google Fonts
ust add a special style sheet link in the section and then refer to the font in the CSS.
Helvetica and Garamond
Use the "Helvetica" font for headings, and "Garamond" for text
4.用font-face下载字体
<style type="text/css">
@font-face {
font-family: 'ChunkFiveRegular';
src: url('fonts/chunkfive.eot');}
h1, h2 {
font-family: ChunkFiveRegular, Georgia, serif;}
</style>
5.粗体
<style type="text/css">
.credits {
font-weight: bold;}
</style>
normal普通粗细。bold粗体,lighter细。bolder比粗体更粗
还可以用数值100 至1000取整百
6.斜体
<style type="text/css">
.credits {
font-style: italic;}
</style>
oblique或italic
italic 字体本身设计了斜体使用。一般情况都用italic。
bolique强制倾斜
7.大小写
h1 {
text-transform: uppercase;}
h2 {
text-transform: lowercase;}
.credits {
text-transform: capitalize;}
uppercase大写，lowercase小写，capitalize首字母大写
8.下划线或删除线
.credits {
text-decoration: underline;}
a {
text-decoration: none;}
none，无装饰线
underline文本下方添加实线
overline文本上方添加实线
line-through穿过文本
blink文本闪烁
还可以设置颜色，样式。dotted 点集，wavy 波浪red 红色
h1 {
text-decoration-line: overline;
text-decoration-color: red;
}
h1 {
text-decoration-line: underline;
text-decoration-style: solid;
}
h3 {
text-decoration-line: underline;
text-decoration-thickness: 25%;
}
The text-decoration property is a shorthand property for:
text-decoration-line (required)
text-decoration-color (optional)
text-decoration-style (optional)
text-decoration-thickness (optional)
All links in HTML are underlined by default. Sometimes you see that links are styled with no underline. The text-decoration: none; is used to remove the underline from links
a {
text-decoration: none;
}
9.行间距
p {
line-height: 1.4em;}
行间距+字号=行高
行间距设置为1.4em到1.5em之间
设置单行居中,行高等于div高度
div{
height:300px;
line-height：300px;
font-size:60px;
}
默认情况是和顶部对齐·。
10.字母间距和单词间距
h1, h2 {
text-transform: uppercase;
letter-spacing: 0.2em;}
.credits {
font-weight: bold;
word-spacing: 1em;}
正值间距增大，负值间距减少
11.对齐方式
h1 {
text-align: left;}
p {
text-align: justify;}
.credits {
text-align: right;}
有left, right ,center jusitfy.justify是文本两端对齐。段落中除了末行之外的其他每行都要在宽度上占满文本所在容器。
12.垂直对齐,不能控制块级元素，可以控制表格元素
还有middle。具体查阅Mdn
<title>Vertical Align</title>
<style type="text/css">
#six-months {
vertical-align: text-top;}//上端
#one-year {
vertical-align: baseline;}//基线
#two-years {
vertical-align: text-bottom;}//下端
</style>
</head>
<body>
<h1>Briard Life Stages</h1>
<p><img src="images/six-months.gif" width="50" height="50" alt="Six months" id="six-months" /> Six months</p>
<p><img src="images/one-year.gif" width="50" height="50" alt="One year" id="one-year" /> One year</p>
<p><img src="images/two-years.gif" width="50" height="50" alt="Two years" id="two-years" /> Two years</p>
</body>
垂直对齐，主要用于内联元素。如img。
13.文本缩进
<!DOCTYPE html>
<html>
<head>
<title>Text Indent</title>
<style type="text/css">
h1 {
background-image: url("images/logo.gif");
background-repeat: no-repeat;
text-indent: -9999px;
width: 165px;
height: 100px;}
.credits {
text-indent: 20px;}
</style>
</head>
<body>
<h1>Briards</h1>
<p class="credits">by Ivy Duckett</p>
<p class="intro">The <a class="breed" href="http://en.wikipedia.org/wiki/Briard">briard</a>, or berger de brie, is a large breed of dog traditionally used as a herder and guardian of sheep.</p>
<h2>Breed History</h2>
<p>The briard, which is believed to have originated in France, has been bred for centuries to herd and to protect sheep. The breed was used by the French Army as sentries, messengers and to search for wounded soldiers because of its fine sense of hearing. Briards were used in the First World War almost to the point of extinction. Currently the population of briards is slowly recovering. Charlemagne, Napoleon, Thomas Jefferson and Lafayette all owned briards.</p>
</body>
</html>
负值向左缩进。p向右缩进。
14.投影。text-shadow
<!DOCTYPE html>
<html>
<head>
<title>Text Shadow</title>
<style type="text/css">
p {
font-size: 200%;
padding: 20px;
text-align: center;}
p.one {
background-color: #eeeeee;
color: #666666;
text-shadow: 1px 1px 0px #000000;}
p.two {
background-color: #dddddd;
color: #666666;
text-shadow: 1px 1px 3px #666666;}
p.three {
background-color: #cccccc;
color: #ffffff;
text-shadow: 2px 2px 7px #111111;}
p.four {
background-color: #bbbbbb;
color: #cccccc;
text-shadow: -1px -2px #666666;}
p.five {
background-color: #aaaaaa;
color: #ffffff;
text-shadow: -1px -1px #666666;}
</style>
</head>
<body>
<p class="one">The briard is known as a heart wrapped in fur.</p>
<p class="two">The briard is known as a heart wrapped in fur.</p>
<p class="three">The briard is known as a heart wrapped in fur.</p>
<p class="four">The briard is known as a heart wrapped in fur.</p>
<p class="five">The briard is known as a heart wrapped in fur.</p>
</body>
</html>
text-shadow: -1px -2px #666666;
第一个值表明阴影向左或向右延伸的距离。
第二个值表明阴影向上或向下延伸的距离
第三个值指定投影的模糊程度
最后一项是投影的颜色
15.首字母或首行文本
<!DOCTYPE html>
<html>
<head>
<title>Text Decoration</title>
<style type="text/css">
p.intro:first-letter {
font-size: 200%;}
p.intro:first-line {
font-weight: bold;}
</style>
</head>
<body>
<h1>Briards</h1>
<p class="credits">by Ivy Duckett</p>
<p class="intro">The <a class="breed" href="http://en.wikipedia.org/wiki/Briard">briard</a>, or berger de brie, is a large breed of dog traditionally used as a herder and guardian of sheep.</p>
<h2>Breed History</h2>
<p>The briard, which is believed to have originated in France, has been bred for centuries to herd and to protect sheep. The breed was used by the French Army as sentries, messengers and to search for wounded soldiers because of its fine sense of hearing. Briards were used in the First World War almost to the point of extinction. Currently the population of briards is slowly recovering. Charlemagne, Napoleon, Thomas Jefferson and Lafayette all owned briards.</p>
</body>
</html>
伪元素：first-letter,first-line
16.链接样式（伪类）
a:link {
color: deeppink;
text-decoration: none;}
a:visited {
color: black;}
a:hover {
color: deeppink;
text-decoration: underline;}
a:active {
color: darkcyan;}
link:未访问过
visited：已访问过
hover:悬浮在上时
active：点击时
：focus焦点
字体复合写法
font使用方式：
字体 bold 字体大小（倒数第二位）字体族（倒数第一位）
.class{
font:bold italic 100px "华文彩云"，"华文琥珀"，sans-serif
}
Text Alignment and Text Direction
In this chapter you will learn about the following properties:
text-align
text-align-last
direction
unicode-bidi
vertical-align
1.The text-align property is used to set the horizontal alignment of a text.
A text can be left or right aligned, centered, or justified.
When the text-align property is set to "justify", each line is stretched so that every line has equal width, and the left and right margins are straight (like in magazines and newspapers):
2.The text-align-last property specifies how to align the last line of a text.
3.The direction and unicode-bidi properties can be used to change the text direction of an element
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
direction: rtl;
unicode-bidi: bidi-override;
}
</style>
</head>
<body>
<p>This is the default text direction.</p>
<p class="ex1">This is right-to-left text direction.</p>
</body>
</html>
4.The vertical-align property sets the vertical alignment of an element.
CSS Web Safe Fonts
you should add a list of similar "backup fonts" in the font-family property. If the first font does not work, the browser will try the next one, and the next one, and so on. Always end the list with a generic font family name.
Here, there are three font types: Tahoma, Verdana, and sans-serif. The second and third fonts are backups, in case the first one is not found.
p {
font-family: Tahoma, Verdana, sans-serif;
}
Best Web Safe Fonts for HTML and CSS
The following list are the best web safe fonts for HTML and CSS:
Arial (sans-serif)
Verdana (sans-serif)
Tahoma (sans-serif)
Trebuchet MS (sans-serif)
Times New Roman (serif)
Georgia (serif)
Garamond (serif)
Courier New (monospace)
Brush Script MT (cursive)
Font Variant
The font-variant property specifies whether or not a text should be displayed in a small-caps font.
In a small-caps font, all lowercase letters are converted to uppercase letters. However, the converted uppercase letters appears in a smaller font size than the original uppercase letters in the text.
浙公网安备 33010602011771号