当前位置:Gxlcms > html代码 > 2015-06-02在html中使用特殊字体_html/css_WEB-ITnose

2015-06-02在html中使用特殊字体_html/css_WEB-ITnose

时间:2021-07-01 10:21:17 帮助过:8人阅读

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

效果图:

html内容:





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

人气教程排行