2015-06-02 Using special fonts in html_html/css_WEB-ITnose

Purpose: A poem that requires reading from right to left, arranged vertically, similar to ancient Chinese

Rendering:

html content:

< /head>

Two Poems from Nange
Poems from Willow Branches

Old things are inherently inferior to new

Albizia peach cores will eventually be hated

There is no one else here, Xu Yuanlai

Light a lamp at the bottom of the well, deep in the candlelight

Gong Lang Chang Xing Mo Go

Linglong Dice An Hongdou

I miss you so much

index.css content:

@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;
}

/*Use selector to specify font*/
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;
}

Source file:

http://yunpan.cn/cwkdus2HhjZKB (extraction code: 9a47)