目的：一首詩，要求從右往左讀，垂直排列，類似古文
效果圖：
html內容：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>在html中使用特殊字體</title>
<link rel="stylesheet" href="index.css">
</head>
<style>
p{font-size: 54px;}
</style>
<body>
<div class="realistic" style="width: 1200px;height: 800px;">
<span>南歌子詞二首</span>
<span> 柳枝詞</span>
<p>一尺深紅勝曲塵</p>
<p>天生舊物不如新</p>
<p>合歡桃核終堪恨</p>
<p>里許元來別有人</p>
<p>井底點燈深燭伊</p>
<p>共郎長行莫圍棋</p>
<p>玲瓏骰子安紅豆</p>
<p>入骨相思知不知</p>
</div>
</body>
</html>
index.css內容：
@font-face {
font-family: 'pinghei';
src: url('pinghei.eot');
src:
url('pinghei.eot?#font-spider') format('embedded-opentype'),
url('pinghei.woff') format('woff'),
url('pinghei.ttf') format('truetype'),
url('pinghei.svg') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'font2';
src: url('font2.eot');
src:
url('font2.eot?#font-spider') format('embedded-opentype'),
url('font2.woff') format('woff'),
url('font2.ttf') format('truetype'),
url('font2.svg') format('svg');
font-weight: normal;
font-style: normal;
}
/*使用選擇器指定字體*/
p{
/*-webkit-writing-mode: vertical-rl;*/
font-family: 'pinghei';
margin: 0 0.5em;
line-height: 1.2em;
letter-spacing: 10px;
}
span{
font-family: 'font2'
}
.realistic {
-webkit-writing-mode: vertical-rl;
color: $color;
font-size: 40px;
position: absolute;
top: $top;
left: -400px;
//-webkit-filter:contrast(7);
opacity: 1/(($steps*2));
transform-origin: 900px 280px;
max-width: 1200px;
transform: scale($scale,$scale) perspective($perspective) rotateY($rotationY) rotateX($rotationX);
text-shadow: 0 0 3px transparentize($color,0.4), 0 0 1px transparentize($color,0.8);
text-align: left;
}
源文件:
http://yunpan.cn/cwkdus2HhjZKB （提取碼：9a47）