美观的网站字体CSS样式
5星
- 浏览量: 0
- 大小:None
- 文件类型：None
简介：
本资源介绍如何使用CSS创建美观且功能性强的网页字体样式，涵盖各种文字效果和响应式排版技巧。
在Web开发过程中选择合适的字体样式对于网站的整体视觉效果及用户体验至关重要。以下是十一种不同的漂亮网站字体CSS样式的介绍：
1. 经典的serif体：
```css
body {
margin: 0;
padding: 0;
line-height: 1.5em;
font-family:Times New Roman, Times, serif;
font-size: 14px;
color:#000000;
background:#f2e7ca url(images/templatemo_body.jpg) top center no-repeat;
}
```
这种样式使用了serif字体，如“Times New Roman”，字体大小为14像素，背景图片是images/templatemo_body.jpg”。
2. 暗黑风格：
```css
body {
background:#2f373a;
font-family:Arial, Helvetica, sans-serif;
font-size: 100%;
line-height: 1em;
color:#4e4e4e;
min-width:920px;
border-top:10px solid #0c0e0e;
}
```
使用暗黑色调，背景颜色为#2f373a。
3. 简洁的sans-serif体：
```css
body {
font-family:Arial, Helvetica, sans-serif;
font-size: 1em;
vertical-align: middle;
font-weight:normal;
}
```
使用了常见的无衬线字体，如“Arial”，大小为1em。
4. 中文网站的常见字体：
```css
body {
margin:0px; padding:0px; background-color:#E7EAEB;
font-family:微软雅黑, 黑体, 宋体;
font-size: 12px;
}
```
使用了中文常见的“微软雅黑”、“黑体”和“宋体”，字体大小为12像素。
5. 简洁风格：
```css
body {
font:.8em Arial, Tahoma, Verdana;
background:#fff url(../images/bg.gif) repeat-x;
color:#777;
}
```
使用了简洁的字体，如“Arial”，大小为0.8em。
6. 右浮动风格：
```css
body {
width:auto; margin-top:12px; float:right;
font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
font-size: 11px;
color:#999999;
line-height:25px;
letter-spacing:1px;
}
```
使用了右浮动，字体大小为11像素。
7. 左浮动风格：
```css
body {
width:auto; margin-left:1px; float:left;
font-family:Arial, Helvetica, sans-serif;
font-size: 13px;
color:#5f5f5f;
line-height:35px;
text-transform:uppercase;
}
```
使用了左浮动，字体大小为13像素。
8. 古典serif体：
```css
body {
background:#e1e5e8; font-family:Georgia, Tahoma, Sans-Serif;
font-size: 12px;
line-height: 18px;
color:#888;
}
```
使用了“Georgia”等古典字体，大小为12像素。
9. 绿色按钮风格：
```css
body {
width:130px;height:20px;background:url(images/servicesbg.gif) 0 0 repeat-x #68EF00;
color:#317400;font:18px/14px Georgia, Times New Roman, Times, serif;
}
```
使用了绿色背景和“Georgia”字体。
10. 绿色链接风格：
```css
body {
width:256;height:99;background:url(images/serviceslinkbg.gif) 73% no-repeat #E8F4FF;
color:#DADADA;font-family:Arial Black, Gadget, sans-serif;
font-size:.1em;line-height:0;text-decoration:none;
}
```
使用了绿色背景和“Georgia”字体。
11. 简洁的sans-serif体：
```css
body {
margin: 0; padding: 0;
...
}
```
未定义具体样式，可以根据需求自定。
全部评论 (0)
