CSS字体排版
来源：互联网 发布：ecshop源码研读分析 编辑：程序博客网 时间：2024/05/17 22:27
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Typography - Examples for CSS and Web Typography - www.jzxue.com</title>
<style type="text/css">
html, body { width: 75%; }
h3.reflect_1 { color: #333333; border-bottom: 6px solid #DDDDDD; line-height: .2em; margin: 0; padding:0 0 0 10px; font-size: 150%; }
h3.reflect_2 { color: #CECECE; margin: 0; line-height: .6em; border-top: 1px solid #EEEEEE; padding: 0 0 0 10px; font-size: 150%;}
h3.line_drop { font-family:"Trebuchet MS", Garamond, Georgia; line-height: .88em; border-bottom: #990000 1px solid; color: #990000;
letter-spacing: -2px; }
h3.elegant { letter-spacing: -2px; font-family:Georgia, "Times New Roman", Times, serif; font-weight: 100; font-size: 200%; text-shadow: #666666 0.2em 0.2em; }
h3.handwriting { font-style: italic; font-weight: bold; font-family: "Comic Sans MS"; letter-spacing: -1px; font-size: 100%; word-spacing: .25em; }
h3.handwriting2 { font-style: italic; font-weight: 100; font-family:"Trebuchet MS", Garamond, Georgia; letter-spacing: -1px; font-size: 100%; word-spacing: .25em; }
h3.handwriting3 { font-style: italic; font-weight: 100; font-family: "Comic Sans MS"; letter-spacing: 1px; font-size: 100%; word-spacing: .25em; }
h3.hide { font-size: 150%; font-weight: 100; line-height: .4em; border-bottom: 7px solid #FFFF66; }
h3.capital { font-size: 375%; text-transform: uppercase; letter-spacing: -8px; }
h3.capital span { font-size: 70%; text-transform: lowercase; letter-spacing: -1px;}
p.letters { line-height: .64em; letter-spacing: -2px; font-family: "Courier New", Courier, monospace; font-size: 25px; font-weight: 100; text-transform: uppercase;}
p.letters2 { line-height: .72em; letter-spacing: -2px; font-family: "Times New Roman", Times, serif; font-size: 25px; font-weight: 100; text-transform: uppercase;}
p.letters3 { line-height: .77em; letter-spacing: -2px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 25px; font-weight: 100; text-transform: uppercase;}
h3.newspaper { letter-spacing: .10em; font-size: 36px; text-transform: uppercase; font-weight: 100; border-bottom: groove 2px #CCCCCC; width: auto; line-height: 1em; }
h3.newspaper span { font-family: Georgia, "Times New Roman", Times, serif; }
h3.newspaper2 { letter-spacing: .10em; font-size: 36px; font-weight: 100; border-bottom: groove 2px #CCCCCC; width: auto; line-height: 1em; font-variant: small-caps;}
h3.funky { font-family: "Trebuchet MS", Garamond, Georgia; font-size: 36px;letter-spacing: 20px; line-height: .65em; color: #666666; font-weight: 100;}
h3.funky span { letter-spacing: 5px;}
h3.el { font-family: Verdana, Arial, Helvetica, sans-serif; color: #BBBBBB; border-bottom: #CCCCCC 1px solid; letter-spacing: 1em; font-weight: 100; line-height: .8em; font-size: 9px;}
h3.num_blend { font-size: 36px; font-weight: 100;}
h3.num_blend span { font-size: 24px; line-height: 1em; font-style: italic; font-weight: bold; letter-spacing: 2px;}
h3.scaps { font-variant: small-caps; letter-spacing: -1px; font-size: 200%; font-family: "Courier New", Courier, monospace; font-weight: 100;}
h3.gr { font-size: 500%; margin: 0; float: left; color: #999999; font-family: Impact, Arial, Verdana; text-transform: uppercase; border-bottom: #CC0000 10px solid; font-weight: 100; }
h3.gr2 { font-size: 500%; margin: 25px 0;color: #999999; float: left; font-family: Impact, Arial, Verdana; text-transform: uppercase; position: relative; font-weight: 100; }
h3.g { font-size: 500%; font-family: Georgia, "Times New Roman", Times, serif; font-weight: 100; float: left; margin: 0; color: #133BC1; }
h3.o1 { font-size: 500%; font-family: Georgia, "Times New Roman", Times, serif; font-weight: 100; float: left; margin: 0; color: #E33B21; }
h3.o2 { font-size: 500%; font-family: Georgia, "Times New Roman", Times, serif; font-weight: 100; float: left; margin: 0; color: #E6B500; }
h3.l { font-size: 500%; font-family: Georgia, "Times New Roman", Times, serif; font-weight: 100; float: left; margin: 0; color: #4BCE54; }
h3.lg { font-size: 500%; font-family: Georgia, "Times New Roman", Times, serif; font-weight: 100; float: left; margin: 0; color: #0048E3; }
h3.e { font-size: 500%; font-family: Georgia, "Times New Roman", Times, serif; font-weight: 100; float: left; margin: 0; color: #E33B21; font-style: italic; }
.gray { background: #000000; padding: 20px; }
h3.gray2 { font-size: 200%; text-transform: uppercase; font-family: Garamond, Georgia, "Times New Roman";
letter-spacing: .5em; font-weight: 100; color: #FFFFFF; border-top: 1px solid #CCCCCC; border-bottom: #CCCCCC 1px solid; width: 600px; text-align: center; }
h3.fed { color: #660099; letter-spacing: -.08em; font-size: 500%; font-family: Verdana, Arial, Helvetica, sans-serif; }
h3.fed span { color: #999999; margin: 0 0 0 -.1em; font-size: 105%; }
h3.y1 { float: left; font-size: 500%; font-family: Garamond, Georgia, "Times New Roman"; text-transform: uppercase; margin: 0;
font-weight: 0; color: #FF0000; }
h3.y2 { float: left; font-size: 350%; font-family: Garamond, Georgia, "Times New Roman"; text-transform: uppercase; margin: 15px 0 0 -10px; font-weight: 0; color: #FF0000; }
h3.y3 { float: left; font-size: 350%; font-family: Garamond, Georgia, "Times New Roman"; text-transform: uppercase; margin: 8px 0 0px -5px; font-weight: 0; color: #FF0000; }
h3.y4 { float: left; font-size: 300%; font-family: Garamond, Georgia, "Times New Roman"; text-transform: uppercase; margin: 12px 0 0px -5px; font-weight: 0; color: #FF0000; }
h3.y5 { float: left; font-size: 350%; font-family: Garamond, Georgia, "Times New Roman"; text-transform: uppercase; margin: 6px 0 0px -1px; font-weight: 0; color: #FF0000; }
h3.y6 { float: left; font-size: 350%; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 4px 0 0px -1px; font-weight: 0; color: #FF0000; }
p.tag a { font-size: 85%; text-align: center; color: #FF3300; }
p.tag a:hover { background: #FFFF66; }
</style>
</head>
<body>
<br />
<h3 class="reflect_1">KINDEK INC</h3>
<h3 class="reflect_2">KINDEK INC</h3>
<h3 class="line_drop">Web Design Rockstarz</h3>
<h3 class="elegant">The chapple De La Ross Johnson</h3>
<h3 class="handwriting">Don't forget to turn off the lights when you leave!</h3>
<h3 class="handwriting2">Don't forget to turn off the lights when you leave!</h3>
<h3 class="handwriting3">Don't forget to turn off the lights when you leave!</h3>
<h3 class="capital">C<span>aptivating, </span>C<span>reative</span></h3>
<h3 class="capital">L<span>ogan's </span>L<span>itigation</span></h3>
<h3 class="capital">Z<span>efer </span>Z<span>oo</span></h3>
<h3 class="capital">B<span>est </span>B<span>uilding</span></h3>
<p class="letters">Potential use for magazine style typography
Close line height and letter spacing,
almost connected lines...</p>
<p class="letters2">Potential use for magazine style typography
Close line height and letter spacing,
almost connected lines...</p>
<p class="letters3">Potential use for magazine style typography
Close line height and letter spacing,
almost connected lines...</p>
<h3 class="newspaper"><span>Webdesign</span> Times</h3>
<h3 class="newspaper2">Webdesign Times</h3>
<h3 class="funky">Fun<strong><em>k</em></strong>y <br /><span> We<em>b<strong>d</strong></em>esign!</span></h3>
<h3 class="el">SATURDAY MARCH 19TH 2046</h3>
<h3 class="num_blend">Rock<span>5</span>tar and a De<span>51</span>gner</h3>
<h3 class="scaps">More Typerighter Style, less cluttered.</h3>
<h3 class="gr">Gray's</h3><h3 class="gr2"> Anatomy</h3>
<br style="clear: both;" />
<h3 class="g">G</h3><h3 class="o1">o</h3><h3 class="o2">o</h3><h3 class="lg">g</h3><h3 class="l">l</h3><h3 class="e">e</h3>
<br style="clear: both;" />
<div class="gray">
<h3 class="gray2">Gray's Anatomy</h3>
</div>
<br style="clear: both;" />
<h3 class="fed"><a href="#">主<span>页</span></a></h3>
<h3 class="y1">Y</h3><h3 class="y2">A</h3><h3 class="y3">H</h3><h3 class="y4">O</h3><h3 class="y5">O</h3><h3 class="y6">!</h3>
<br style="clear: both;" />
Funky
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>CSS Typography - Examples for CSS and Web Typography - www.jzxue.com</title>
<style type="text/css">
html, body { width: 75%; }
h3.reflect_1 { color: #333333; border-bottom: 6px solid #DDDDDD; line-height: .2em; margin: 0; padding:0 0 0 10px; font-size: 150%; }
h3.reflect_2 { color: #CECECE; margin: 0; line-height: .6em; border-top: 1px solid #EEEEEE; padding: 0 0 0 10px; font-size: 150%;}
h3.line_drop { font-family:"Trebuchet MS", Garamond, Georgia; line-height: .88em; border-bottom: #990000 1px solid; color: #990000;
letter-spacing: -2px; }
h3.elegant { letter-spacing: -2px; font-family:Georgia, "Times New Roman", Times, serif; font-weight: 100; font-size: 200%; text-shadow: #666666 0.2em 0.2em; }
h3.handwriting { font-style: italic; font-weight: bold; font-family: "Comic Sans MS"; letter-spacing: -1px; font-size: 100%; word-spacing: .25em; }
h3.handwriting2 { font-style: italic; font-weight: 100; font-family:"Trebuchet MS", Garamond, Georgia; letter-spacing: -1px; font-size: 100%; word-spacing: .25em; }
h3.handwriting3 { font-style: italic; font-weight: 100; font-family: "Comic Sans MS"; letter-spacing: 1px; font-size: 100%; word-spacing: .25em; }
h3.hide { font-size: 150%; font-weight: 100; line-height: .4em; border-bottom: 7px solid #FFFF66; }
h3.capital { font-size: 375%; text-transform: uppercase; letter-spacing: -8px; }
h3.capital span { font-size: 70%; text-transform: lowercase; letter-spacing: -1px;}
p.letters { line-height: .64em; letter-spacing: -2px; font-family: "Courier New", Courier, monospace; font-size: 25px; font-weight: 100; text-transform: uppercase;}
p.letters2 { line-height: .72em; letter-spacing: -2px; font-family: "Times New Roman", Times, serif; font-size: 25px; font-weight: 100; text-transform: uppercase;}
p.letters3 { line-height: .77em; letter-spacing: -2px; font-family: Georgia, "Times New Roman", Times, serif; font-size: 25px; font-weight: 100; text-transform: uppercase;}
h3.newspaper { letter-spacing: .10em; font-size: 36px; text-transform: uppercase; font-weight: 100; border-bottom: groove 2px #CCCCCC; width: auto; line-height: 1em; }
h3.newspaper span { font-family: Georgia, "Times New Roman", Times, serif; }
h3.newspaper2 { letter-spacing: .10em; font-size: 36px; font-weight: 100; border-bottom: groove 2px #CCCCCC; width: auto; line-height: 1em; font-variant: small-caps;}
h3.funky { font-family: "Trebuchet MS", Garamond, Georgia; font-size: 36px;letter-spacing: 20px; line-height: .65em; color: #666666; font-weight: 100;}
h3.funky span { letter-spacing: 5px;}
h3.el { font-family: Verdana, Arial, Helvetica, sans-serif; color: #BBBBBB; border-bottom: #CCCCCC 1px solid; letter-spacing: 1em; font-weight: 100; line-height: .8em; font-size: 9px;}
h3.num_blend { font-size: 36px; font-weight: 100;}
h3.num_blend span { font-size: 24px; line-height: 1em; font-style: italic; font-weight: bold; letter-spacing: 2px;}
h3.scaps { font-variant: small-caps; letter-spacing: -1px; font-size: 200%; font-family: "Courier New", Courier, monospace; font-weight: 100;}
h3.gr { font-size: 500%; margin: 0; float: left; color: #999999; font-family: Impact, Arial, Verdana; text-transform: uppercase; border-bottom: #CC0000 10px solid; font-weight: 100; }
h3.gr2 { font-size: 500%; margin: 25px 0;color: #999999; float: left; font-family: Impact, Arial, Verdana; text-transform: uppercase; position: relative; font-weight: 100; }
h3.g { font-size: 500%; font-family: Georgia, "Times New Roman", Times, serif; font-weight: 100; float: left; margin: 0; color: #133BC1; }
h3.o1 { font-size: 500%; font-family: Georgia, "Times New Roman", Times, serif; font-weight: 100; float: left; margin: 0; color: #E33B21; }
h3.o2 { font-size: 500%; font-family: Georgia, "Times New Roman", Times, serif; font-weight: 100; float: left; margin: 0; color: #E6B500; }
h3.l { font-size: 500%; font-family: Georgia, "Times New Roman", Times, serif; font-weight: 100; float: left; margin: 0; color: #4BCE54; }
h3.lg { font-size: 500%; font-family: Georgia, "Times New Roman", Times, serif; font-weight: 100; float: left; margin: 0; color: #0048E3; }
h3.e { font-size: 500%; font-family: Georgia, "Times New Roman", Times, serif; font-weight: 100; float: left; margin: 0; color: #E33B21; font-style: italic; }
.gray { background: #000000; padding: 20px; }
h3.gray2 { font-size: 200%; text-transform: uppercase; font-family: Garamond, Georgia, "Times New Roman";
letter-spacing: .5em; font-weight: 100; color: #FFFFFF; border-top: 1px solid #CCCCCC; border-bottom: #CCCCCC 1px solid; width: 600px; text-align: center; }
h3.fed { color: #660099; letter-spacing: -.08em; font-size: 500%; font-family: Verdana, Arial, Helvetica, sans-serif; }
h3.fed span { color: #999999; margin: 0 0 0 -.1em; font-size: 105%; }
h3.y1 { float: left; font-size: 500%; font-family: Garamond, Georgia, "Times New Roman"; text-transform: uppercase; margin: 0;
font-weight: 0; color: #FF0000; }
h3.y2 { float: left; font-size: 350%; font-family: Garamond, Georgia, "Times New Roman"; text-transform: uppercase; margin: 15px 0 0 -10px; font-weight: 0; color: #FF0000; }
h3.y3 { float: left; font-size: 350%; font-family: Garamond, Georgia, "Times New Roman"; text-transform: uppercase; margin: 8px 0 0px -5px; font-weight: 0; color: #FF0000; }
h3.y4 { float: left; font-size: 300%; font-family: Garamond, Georgia, "Times New Roman"; text-transform: uppercase; margin: 12px 0 0px -5px; font-weight: 0; color: #FF0000; }
h3.y5 { float: left; font-size: 350%; font-family: Garamond, Georgia, "Times New Roman"; text-transform: uppercase; margin: 6px 0 0px -1px; font-weight: 0; color: #FF0000; }
h3.y6 { float: left; font-size: 350%; font-family: Verdana, Arial, Helvetica, sans-serif; margin: 4px 0 0px -1px; font-weight: 0; color: #FF0000; }
p.tag a { font-size: 85%; text-align: center; color: #FF3300; }
p.tag a:hover { background: #FFFF66; }
</style>
</head>
<body>
<br />
<h3 class="reflect_1">KINDEK INC</h3>
<h3 class="reflect_2">KINDEK INC</h3>
<h3 class="line_drop">Web Design Rockstarz</h3>
<h3 class="elegant">The chapple De La Ross Johnson</h3>
<h3 class="handwriting">Don't forget to turn off the lights when you leave!</h3>
<h3 class="handwriting2">Don't forget to turn off the lights when you leave!</h3>
<h3 class="handwriting3">Don't forget to turn off the lights when you leave!</h3>
<h3 class="capital">C<span>aptivating, </span>C<span>reative</span></h3>
<h3 class="capital">L<span>ogan's </span>L<span>itigation</span></h3>
<h3 class="capital">Z<span>efer </span>Z<span>oo</span></h3>
<h3 class="capital">B<span>est </span>B<span>uilding</span></h3>
<p class="letters">Potential use for magazine style typography
Close line height and letter spacing,
almost connected lines...</p>
<p class="letters2">Potential use for magazine style typography
Close line height and letter spacing,
almost connected lines...</p>
<p class="letters3">Potential use for magazine style typography
Close line height and letter spacing,
almost connected lines...</p>
<h3 class="newspaper"><span>Webdesign</span> Times</h3>
<h3 class="newspaper2">Webdesign Times</h3>
<h3 class="funky">Fun<strong><em>k</em></strong>y <br /><span> We<em>b<strong>d</strong></em>esign!</span></h3>
<h3 class="el">SATURDAY MARCH 19TH 2046</h3>
<h3 class="num_blend">Rock<span>5</span>tar and a De<span>51</span>gner</h3>
<h3 class="scaps">More Typerighter Style, less cluttered.</h3>
<h3 class="gr">Gray's</h3><h3 class="gr2"> Anatomy</h3>
<br style="clear: both;" />
<h3 class="g">G</h3><h3 class="o1">o</h3><h3 class="o2">o</h3><h3 class="lg">g</h3><h3 class="l">l</h3><h3 class="e">e</h3>
<br style="clear: both;" />
<div class="gray">
<h3 class="gray2">Gray's Anatomy</h3>
</div>
<br style="clear: both;" />
<h3 class="fed"><a href="#">主<span>页</span></a></h3>
<h3 class="y1">Y</h3><h3 class="y2">A</h3><h3 class="y3">H</h3><h3 class="y4">O</h3><h3 class="y5">O</h3><h3 class="y6">!</h3>
<br style="clear: both;" />
</html>
显示效果：
KINDEK INC
KINDEK INC
Web Design Rockstarz
The chapple De La Ross Johnson
Don't forget to turn off the lights when you leave!
Don't forget to turn off the lights when you leave!
Don't forget to turn off the lights when you leave!
Captivating, Creative
Logan's Litigation
Zefer Zoo
Best Building
POTENTIAL USE FOR MAGAZINE STYLE TYPOGRAPHY CLOSE LINE HEIGHT AND LETTER SPACING, ALMOST CONNECTED LINES...
POTENTIAL USE FOR MAGAZINE STYLE TYPOGRAPHY CLOSE LINE HEIGHT AND LETTER SPACING, ALMOST CONNECTED LINES...
POTENTIAL USE FOR MAGAZINE STYLE TYPOGRAPHY CLOSE LINE HEIGHT AND LETTER SPACING, ALMOST CONNECTED LINES...
WEBDESIGN TIMES
Webdesign Times
Funky
Webdesign!
SATURDAY MARCH 19TH 2046
Rock5tar and a De51gner
More Typerighter Style, less cluttered.
GRAY'S
ANATOMY
G
o
o
g
l
e
GRAY'S ANATOMY
主页
Y
A
H
O
O
!
- CSS字体排版
- 文字排版字体怎么排版
- css排版
- CSS排版
- CSS 排版
- CSS排版
- 字体垂直排版
- 文字排版--字体
- 论文字体排版要求
- CSS Mastery2(10.5-字体链接&更好的Web排版&0627)&R
- 中文排版CSS心得
- 中文排版CSS心得
- 中文排版CSS心得
- 中文排版CSS心得
- 中文排版CSS心得
- 中文排版CSS心得
- 中文排版CSS心得
- css全图排版
- linux内核——进程通信
- php5.4.20 php fpm 编译安装
- RSA公钥加密算法
- Content Provider的设计来源！
- 编程之道--Book Eight - Hardware and Software
- CSS字体排版
- 梦想与现实
- 二分图最大权匹配-km算法
- 妙趣横生的算法之2 链表
- content provider的使用！
- COJ 1326 The contest（分组背包）
- Android AsyncTask类
- 学习笔记：二叉树后序遍历非递归算法
- 下层对上层透明是什么意思？
