>  기사  >  웹 프론트엔드  >  2015-06-02 在html中使用特殊字体_html/css_WEB-ITnose

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

WBOY
WBOY원래의
2016-06-24 11:43:191207검색

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

效果图:

 

 

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)

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.