字体样式

字体样式

1.字体命名

语法：
font-family :  <family-name>

说明：
设置文字名称，可以使用多个名称，或者使用逗号
分隔，浏览器则按照先后顺序依次使用可用字体。

例：
p { font-family:‘楷体'，'黑体', 'Arial’ }

2. font-size(字体大小)

语法:
font-size ： <length> | <percentage>
注：如果用百分比作为单位，则是基于父元素字体的大小

例：
p { font-size:14px;} 

3. font-weight(字体加粗)

语法：
font-weight : normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

例：
p { font-weight:bold;}

4. font-style(字体斜体)

font-style : normal | italic | oblique

例：      
 p { font-style: normal; }
 p { font-style: italic; } p { font-style: oblique; }

5. font(字体样式缩写)

font : font-style || font-variant || font-weight || font-size || / line-height || font-family

例：

p{
 font-style:italic;
 font-weight:bold;
 font-size:14px;
 line-height:22px;
 font-family:宋体;
}

缩写后：

p { font:italic bold 14px/22px 宋体}

 6. color(字体颜色)

控制文本的字体颜色

语法：
color：<color>

说明：
颜色属性值分三种值的格式
英文单词，比如 red , yellow ,green …
十六进制表示方式，#开头，6个十六进制的字符或数字 组合。比如：#FFFFFF，#000000，#CCCAAA，#22BCAD。十六进制： 0-9 和 a-f
RGB模式，红 0-255，绿 0-255，蓝 0-255。比如： RGB(120,33,234)
   
  RGBA(255,0,0,.5)   RGBA模式，最后的A表示透明度50%
例：
p{
 color:#FF0000;
}

7. text-decoration(文本装饰线条)

控制文本装饰线条

text-decoration : none || underline || blink || overline || line-through

例： 
  
p { text-decoration:overline;}

p { text-decoration:underline;}

p { text-decoration:line-through;}

 

 8. text-shadow(文字阴影)

控制文字的阴影部分。

text-shadow: h-shadow v-shadow blur color;

h-shadow         必需。水平阴影的位置。允许负值。
v-shadow         必需。垂直阴影的位置。允许负值。
blur                   可选。模糊的距离。
color                 可选。阴影的颜色。

实例：
h1{
 text-shadow: 2px 2px #ff0000;

9. @font-face嵌入字体（课外扩展）

@font-face能够加载服务器端的字体文件，让浏览器端可以显示用户电脑里没有安装的字体。
语法：
@font-face {
font-family : 自定义字体名称;
src : url(字体文件在服务器上的相对或绝对路径)  format(字体类型);
}
例：
@font-face {/*该写法是兼容所有的浏览器*/
 font-family : bgg;
 src: url('fonts/fontawesome-webfont.eot'), /* IE9+ */
 url('fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
 url('fonts/fontawesome-webfont.woff') format('woff'), /* chrome、firefox */
 url('fonts/fontawesome-webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari,Android, iOS 4.2+*/
  url('fonts/fontawesome-webfont.svg') format('svg'); /* iOS 4.1+ */
}