コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > 2015-06-02 html_html/css_WEB-ITnose での特殊フォントの使用

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

WBOY
リリース： 2016-06-24 11:43:19
オリジナル
1225 人が閲覧しました

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

レンダリング:

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)

関連ラベル：
2015-06-02 在html中使用特殊字体
ソース：php.cn
前の記事：幅と高さの可変垂直センタリング解析_html/css_WEB-ITnose 次の記事：同じフォームで、クリックしたボタンに応じて別のページにジャンプします_html/css_WEB-ITnose
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
function_exists() はカスタム関数を決定できません Function test () {return true;} if (function_exists ('test')) {echo "テストは関数です";
から 2024-04-29 11:01:01
0
3
2054
Google Chromeのモバイル版を表示する方法 こんにちは、先生、Google Chrome をモバイル版に変更するにはどうすればよいですか?
から 2024-04-23 00:22:19
0
11
2210
子ウィンドウは親ウィンドウを操作しますが、出力は応答しません。 最初の 2 つの文は実行可能ですが、最後の文は実装できません。
から 2024-04-19 15:37:47
0
1
1865
親ウィンドウには出力がありません document.onclick = function(){ window.opener.document.write('私は子ウィンドウの出力です');
から 2024-04-18 23:52:34
0
1
1750
CSS マインド マッピングに関するコースウェアはどこにありますか? コースウェア
から 2024-04-16 10:10:18
0
0
1774
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート