宽容他人,放过自己。

CSS Fonts(字体)部分

Posted on By anchoriteFili

相关链接:

CSS Fonts(字体)部分

css部分

body {
    background: #063 url("http://c.hiphotos.baidu.com/image/pic/item/b3b7d0a20cf431ad799ccaf94f36acaf2fdd98a0.jpg") repeat left top;
    margin: 200px;
}

p {
    
}

/*css字体属性定义字体,加粗,大小,文字样式*/
/*
所有css字体属性
font : 在一个声明中设置所有的字体属性
*/

/*
Font特性

font-style : 规定字体样式 
normal 标准的字体样式 
italic 浏览器会显示一个斜体的字体样式
oblique 浏览器会显示一个倾斜的字体样式
inherit 规定应该从父元素继承字体样式

font-variant : 规定字体异体
normal 标准的字体
small-caps 浏览器会显示小型大写字母的字体
inhert 规定应该从父元素继承font-variant属性值

font-weight : 规定字体的粗细
normal 标准的字符。
bold 定义粗体字符。
bolder 定义更粗的字符
lighter 定义更细的字符
100 200 。。。 900 定义由粗到细的字符。400等同于nomal,而700等同于bold
inhert 规定应该从父元素继承字体的粗细

font-size/line-height 规定字体尺寸和行高

font-size 属性值
把字体的尺寸设置为不同的尺寸,从xx-small到xx-large,默认值:medium
xx-small
x-small
small
medium
large      fsdaddaasdaasdasadasd  daasdasdas
x-large
xx-large
smaller 把font-size 设置为比父元素更小的尺寸
larger 把font-size 设置为比父元素更大的尺寸
length 把font-size 设置为一个固定的值
% 把font-size 设置为基于父元素的一个百分比值
inhert 规定应该从父元素继承字体尺寸

font-family : 规定字体系列
family-name 用于某个元素的字体族名称或/及类族名称的一个优先表
generic-family 
inherit 规定应该从父元素继承字体系列

caption : 定义被标题控件(比如按钮、下拉列表等)使用的字体。
icon : 定义被图标标记使用的字体
menu : 定义被下拉列表使用的字体
message-box : 定义被对话框使用的字体
small-caption : caption 字体的小型版本。
status-bar : 定义被窗口状态栏使用的字体

font-style : 指定文本的字体样式

font-variant 属性设置小型大写字母的字体显示文本,这意味着所有的小写字母均会被转换为大写,
但是所有使用小型大写字体的字母与其余文本相比,其字体尺寸更小。
normal 标准的字体
small-caps 浏览器会显示小型大写字母的字体。
inherit 规定应该从父元素继承font-variant属性值。

font-weight : 指定字体的粗细

*/

/* css字型
* 通用字体系列 - 拥有相似外观的字体系统组合(如 "Serif"或"monospace")
* 特定字体系列 - 一个特定的字体系列 (如 "Times" 或 "Courier")
serif Times New Roman  / Georgia serif字体中字符在行的额末端拥有额外的装饰
sans-serif Arial / Verdana  "Sans"是指无 - 这些字体的末端没有额外的装饰
Monospace Courier New / Lucida Console 所有的等宽字符具有相同的宽度

*/

/*
font-family 属性设置文本的字体系列
font-family属性应该设置而几个字体名称作为一种"后备"机制,如果浏览器不支持这一种字体,
他将尝试下一种字体。
注意: 如果字体系列的名称呢个超过一个字,它必须用引号
*/

p.serif {
    font-family:"Times New Roman", Times, serif;
}

p.sansserif {
    font-family:Arial, Helvetica, sans-serif;
}

/* 字体样式
主要用于指定斜体文字的字体样式属性
*/

p.normal {
    font-style:normal;
}

p.italic {
    font-style:italic; /*斜体字*/
}

p.oblique {
    font-style:oblique; /*倾斜的文字*/
}

/* 设置字体大小像素*/
h1 {
    font-size:40px;
}

h2 {
    font-size:30px;
}

p {
    font-size:14px;
}

/* 用em来设置字体大小
为了避免Internet Explorer 中无法挑中文本的问题,许多开发者使用em代为代替像素。
1em和当前字体大小相等。可以通过这个公式将像素转换为em
*/

body {
    font-size:100%;
}

h1 {
    font-size:2.5em; /*40px/16=2.5em*/
}

h2 {
    font-size:1.875em; /*30px/16=1.875em*/
}

p {
    font-size:0.875em; /*14px/16=o.876em*/
}

/* 设置字体加粗*/
p.light {
    font-weight:lighter;
}

p.thick {
    font-weight:bold;
}

p.thincker {
    font-weight:bolder;
}

/* 设置字体的转变 */
p.smallcaps {
    font-variant:small-caps;
}

html 部分

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>css练习</title>
<link rel="stylesheet" type="text/css" href="css练习.css">
</head>
<body>

<h1> h1头测试</h1>
<h2> h2头测试</h2>
<p> p测试</p>

<p class="serif">family测试</p>
<p class="sansserif">This is a paragraph, shown in the </p>

<p class="normal">normal字体</p>
<p class="italic">italic字体</p>
<p class="oblique">oblique字体</p>

<p class="light">细字体heheheeheh</p>
<P class="thick">加粗hehehehehe</P>
<p class="thincker">更粗heheheheheeh</p>

<p class="smallcaps">小写转大写,本来小写的尺寸不变flajfakfjGGlfajlFF</p>

</body>
</html>