2015-06-02 html_html/css_WEB-ITnose での特殊フォントの使用-htmlチュートリアル-php.cn

2015-06-02 html_html/css_WEB-ITnose での特殊フォントの使用

WBOY

リリース： 2016-06-24 11:43:19

オリジナル

1174 人が閲覧しました

目的: 古代中国語に似た、右から左に読む必要がある詩。縦に配置されています。

レンダリング:

html content:

HTML で特殊フォントを使用する

ナンジュの 2 つの詩
柳の枝

深紅の 1 フィートが Qu Chen に勝つ

;

古いものは本質的に新しいものより劣る

ネムノキの桃仁はやがて嫌われることになる

徐源来には他に誰もいない

井戸の奥でランプを灯す

Gonglang Changxing Mo Go

Linglong Dice An Hondou

< p> : '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;
位置: 絶対;
上: $top;

左: -400px ;

//-webkit-filter:contrast(7);
不透明度: 1/(($steps*2));
変換元: 900px 280px;
最大幅: 1200px;

変換:scale($scale , $scale) パースペクティブ($perspective) 回転Y($rotationY) 回転X($rotationX);

text-shadow: 0 0 3px transparentize($color,0.4), 0 0 1px transparentize($color,0.8);
text-align : 左;
}

ソースファイル:

http://yunpan.cn/cwkdus2HhjZKB (抽出コード: 9a47)