html中加入特殊字体,在html中使用特殊字体

目的：一首诗，要求从右往左读，垂直排列，类似古文

效果图：

html内容：

在html中使用特殊字体

p{font-size: 54px;}

南歌子词二首

柳枝词

一尺深红胜曲尘

天生旧物不如新

合欢桃核终堪恨

里许元来别有人

井底点灯深烛伊

共郎长行莫围棋

玲珑骰子安红豆

入骨相思知不知

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- 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)