CSS3 のテキストとフォントの新しい設定

CSS3 のテキストとフォントの新しい設定

テキストシャドウ

テキストシャドウ: 水平オフセット 垂直オフセット ぼかし色

互換性: IE10+

<!DOCTYPE html>
<html lang="ja" マニフェスト="index.manifest">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
    p{
        色:青;
        テキストシャドウ: 3px 3px 3px 黒;
    }

</スタイル>
</head>
<本文>
    <p>これはテストテキストです</p>
</本文>
</html>

CSS3 改行

単語区切り: 通常 | すべて区切り | すべて保持

英語のテキストの場合: normal と keep-all は同じ効果があります。break-all は単語の影響を考慮せずに文字を行に分割することを意味します。

中国語テキストの場合: normal と break-all は同じ効果を持ちます。keep-all は句読点に従って折り返すことを意味します。

<!DOCTYPE html>
<html lang="ja" マニフェスト="index.manifest">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
    幅:500ピクセル
    背景:#abcdef;
    p:n番目の子(1){単語区切り:通常;}
    p:n番目の子(2){単語区切り:すべて区切り;}
    p:n番目の子(3){単語区切り:すべて保持;}

    p:n番目の子(5){単語区切り:通常;}
    p:nth-child(6){単語区切り:すべて区切り;}
    p:n番目の子(7){単語区切り:すべて保持;}
</スタイル>
</head>
<本文>
    <p><span>[word-break:normal]</span> 私の夢は、いつの日かジョージア州の赤い丘の上で、かつての奴隷の息子たちとかつての奴隷所有者の息子たちが兄弟愛のテーブルに一緒に座れるようになることです。</p>
    <p><span>[word-break:break-all]</span> 私の夢は、いつの日かジョージア州の赤い丘の上で、かつての奴隷の息子たちとかつての奴隷所有者の息子たちが兄弟愛のテーブルに一緒に座れるようになることです。</p>
    <p><span>[word-break:keep-all]</span> 私の夢は、いつの日かジョージア州の赤い丘の上で、かつての奴隷の息子たちとかつての奴隷所有者の息子たちが兄弟愛のテーブルに一緒に座れるようになることです。</p>
<時間>
    <p><span>[word-break:normal]</span> 私には夢があります。いつの日かこの国が立ち上がり、その信条の真の意味を実践するという夢です。「我々は、すべての人間は平等に創られているという真実を自明であると信じている。」いつの日かジョージアの赤い丘の上で、かつての奴隷の相続人とかつての奴隷所有者の相続人が兄弟愛のテーブルに一緒に座ることができるという夢があります。 </p>
    <p><span>[word-break:break-all]</span> 私には夢があります。いつの日かこの国が立ち上がり、その信条の真の意味を実践するという夢です。「我々は、すべての人間は平等に創られているという真実を自明であると信じている。」いつの日かジョージアの赤い丘の上で、かつての奴隷の相続人とかつての奴隷所有者の相続人が兄弟愛のテーブルに一緒に座ることができるという夢があります。 </p>
    <p><span>[word-break:keep-all]</span> 私には夢があります。いつの日かこの国が立ち上がり、その信条の真の意味を実践するという夢です。「我々は、すべての人間は平等に創られているという真実を自明であると信じている。」いつの日かジョージアの赤い丘の上で、かつての奴隷の相続人とかつての奴隷所有者の相続人が兄弟愛のテーブルに一緒に座ることができるという夢があります。 </p>
</本文>
</html>

連続する長い英語の単語または URL の折り返し (中国語では無効)

単語折り返し:通常 | 単語区切り;

<!DOCTYPE html>
<html lang="ja" マニフェスト="index.manifest">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
    幅:200ピクセル
    背景:#abcdef;
    p:nth-child(1){ワードラップ:通常;}
    p:nth-child(2){word-wrap:break-word;}
</スタイル>
</head>
<本文>
    <p><span>[word-wrap:normal]</span> <br>ああああああああああああああああああああ</p>
    <p><span>[word-wrap:break-word]</span> <br>ああああああああああああああああああ</p>

</本文>
</html>

text-align-last テキストの最後の行を揃える方法

IEのみがサポートしており、Firefoxでは-moz-プレフィックスを追加する必要があります。Google 50+はサポートしています。

<!DOCTYPE html>
<html lang="ja" マニフェスト="index.manifest">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
    幅:800ピクセル
    背景:#abcdef;
    p:nth-child(1){テキスト配置最終:自動;}
    p:n番目の子(2){テキスト配置最後:左;}
    p:n番目の子(3){テキスト配置最後:右;}
    p:nth-child(4){テキスト配置最後:center;}
    p:nth-child(5){テキスト配置最後:ジャストファイ;}
    p:n番目の子(6){テキスト配置最終:開始;}
    p:nth-child(7){テキスト配置最後:右;}
    p:nth-child(8){テキスト配置最終:初期;}
    p:nth-child(9){テキスト配置最後:継承;}
</スタイル>
</head>
<本文>
    <p><span>auto</span>HTML はハイパーテキスト マークアップ言語と呼ばれ、識別言語です。一連のタグで構成されています。これらのタグを使用すると、ネットワーク上のドキュメント形式を統一し、散在するインターネット リソースを論理的に 1 つのまとまりに接続できます。 HTML テキストは、HTML コマンドで構成された説明テキストです。HTML コマンドは、テキスト、グラフィック、アニメーション、サウンド、表、リンクなどを記述できます。 </p>
    <p><span>left</span>HTML はハイパーテキスト マークアップ言語と呼ばれ、識別言語です。一連のタグで構成されています。これらのタグを使用すると、ネットワーク上のドキュメント形式を統一し、散在するインターネット リソースを論理的に 1 つのまとまりに接続できます。 HTML テキストは、HTML コマンドで構成された説明テキストです。HTML コマンドは、テキスト、グラフィック、アニメーション、サウンド、表、リンクなどを記述できます。 </p>
    <p><span>right</span>HTML はハイパーテキスト マークアップ言語と呼ばれ、識別言語です。一連のタグで構成されています。これらのタグを使用すると、ネットワーク上のドキュメント形式を統一し、散在するインターネット リソースを論理的に 1 つのまとまりに接続できます。 HTML テキストは、HTML コマンドで構成された説明テキストです。HTML コマンドは、テキスト、グラフィック、アニメーション、サウンド、表、リンクなどを記述できます。 </p>
    <p><span>center</span>HTML はハイパーテキスト マークアップ言語と呼ばれ、識別言語です。一連のタグで構成されています。これらのタグを使用すると、ネットワーク上のドキュメント形式を統一し、散在するインターネット リソースを論理的に 1 つのまとまりに接続できます。 HTML テキストは、HTML コマンドで構成された説明テキストです。HTML コマンドは、テキスト、グラフィック、アニメーション、サウンド、表、リンクなどを記述できます。 </p>
    <p><span>justify</span>HTML はハイパーテキスト マークアップ言語と呼ばれ、マーク付け言語です。一連のタグで構成されています。これらのタグを使用すると、ネットワーク上のドキュメント形式を統一し、散在するインターネット リソースを論理的に 1 つのまとまりに接続できます。 HTML テキストは、HTML コマンドで構成された説明テキストです。HTML コマンドは、テキスト、グラフィック、アニメーション、サウンド、表、リンクなどを記述できます。 </p>
    <p><span>開始</span>HTML はハイパーテキスト マークアップ言語と呼ばれ、識別言語です。一連のタグで構成されています。これらのタグを使用すると、ネットワーク上のドキュメント形式を統一し、散在するインターネット リソースを論理的に 1 つのまとまりに接続できます。 HTML テキストは、HTML コマンドで構成された説明テキストです。HTML コマンドは、テキスト、グラフィック、アニメーション、サウンド、表、リンクなどを記述できます。 </p>
    <p><span>end</span>HTML はハイパーテキスト マークアップ言語と呼ばれ、マークアップ言語です。一連のタグで構成されています。これらのタグを使用すると、ネットワーク上のドキュメント形式を統一し、散在するインターネット リソースを論理的に 1 つのまとまりに接続できます。 HTML テキストは、HTML コマンドで構成された説明テキストです。HTML コマンドは、テキスト、グラフィック、アニメーション、サウンド、表、リンクなどを記述できます。 </p>
    <p><span>initial</span>HTML はハイパーテキスト マークアップ言語と呼ばれ、識別言語です。一連のタグで構成されています。これらのタグを使用すると、ネットワーク上のドキュメント形式を統一し、散在するインターネット リソースを論理的に 1 つのまとまりに接続できます。 HTML テキストは、HTML コマンドで構成された説明テキストです。HTML コマンドは、テキスト、グラフィック、アニメーション、サウンド、表、リンクなどを記述できます。 </p>
    <p><span>inherit</span>HTML はハイパーテキスト マークアップ言語と呼ばれ、識別言語です。一連のタグで構成されています。これらのタグを使用すると、ネットワーク上のドキュメント形式を統一し、散在するインターネット リソースを論理的に 1 つのまとまりに接続できます。 HTML テキストは、HTML コマンドで構成された説明テキストです。HTML コマンドは、テキスト、グラフィック、アニメーション、サウンド、表、リンクなどを記述できます。 </p>

</本文>
</html>

text-align-lastはtext-align:justifyの場合にのみ有効です。

テキストオーバーフロー

使用する場合、要素を overflow:hidden; に設定する必要があります。

中国語には無効、短い英語の単語には無効、長い英語の単語にのみ有効

<!DOCTYPE html>
<html lang="ja" マニフェスト="index.manifest">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
    div{幅:800px;オーバーフロー:非表示;}
    背景:#abcdef;
    div:nth-child(1){テキストオーバーフロー:クリップ;}
    div:nth-child(2){テキストオーバーフロー:ellipsis;}
    div:nth-child(3){テキストオーバーフロー:">>";}
    div:nth-child(4){テキストオーバーフロー:クリップ;}
    div:nth-child(5){テキストオーバーフロー:ellipsis;}
    div:nth-child(6){テキストオーバーフロー:">>";}
    div:nth-child(7){テキストオーバーフロー:クリップ;}
    div:nth-child(8){テキストオーバーフロー:ellipsis;}
    div:nth-child(9){テキストオーバーフロー:">>";}
</スタイル>
</head>
<本文>
    <div><span>clip</span>HTML はハイパーテキスト マークアップ言語と呼ばれ、マークアップ言語です。一連のタグで構成されています。これらのタグを使用すると、ネットワーク上のドキュメント形式を統一し、散在するインターネット リソースを論理的に 1 つのまとまりに接続できます。 HTML テキストは、HTML コマンドで構成された説明テキストです。HTML コマンドは、テキスト、グラフィック、アニメーション、サウンド、表、リンクなどを記述できます。 </div>
    <div><span>省略記号</span>HTML はハイパーテキスト マークアップ言語と呼ばれ、識別言語です。一連のタグで構成されています。これらのタグを使用すると、ネットワーク上のドキュメント形式を統一し、散在するインターネット リソースを論理的に 1 つのまとまりに接続できます。 HTML テキストは、HTML コマンドで構成された説明テキストです。HTML コマンドは、テキスト、グラフィック、アニメーション、サウンド、表、リンクなどを記述できます。 </div>
    <div><span>string</span>HTML はハイパーテキスト マークアップ言語と呼ばれ、識別言語です。一連のタグで構成されています。これらのタグを使用すると、ネットワーク上のドキュメント形式を統一し、散在するインターネット リソースを論理的に 1 つのまとまりに接続できます。 HTML テキストは、HTML コマンドで構成された説明テキストです。HTML コマンドは、テキスト、グラフィック、アニメーション、サウンド、表、リンクなどを記述できます。 </div>

    <div><span>クリップ</span>私には夢があります。いつの日か、ジョージア州の赤い丘の上で、かつての奴隷の息子たちとかつての奴隷所有者の息子たちが兄弟愛のテーブルに一緒に座ることができるようになることです。</div>
    <div><span>省略記号</span>私には夢があります。いつの日か、ジョージア州の赤い丘の上で、かつての奴隷の息子たちとかつての奴隷所有者の息子たちが兄弟愛のテーブルに一緒に座ることができるようになることです。</div>
    <div><span>string</span>私には夢があります。いつの日か、ジョージア州の赤い丘の上で、元奴隷の息子たちと元奴隷所有者の息子たちが兄弟愛のテーブルに一緒に座ることができるようになることです。</div>

    <div><span>クリップ</span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div><span>省略記号</span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div><span>文字列</span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>


</本文>
</html>

テキストオーバーフロー:クリップ; 非表示

テキストオーバーフロー:省略記号; 省略記号

text-overflow: 文字列; 文字を指定します。Firefox でのみ有効です。

<!DOCTYPE html>
<html lang="ja" マニフェスト="index.manifest">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
    div{幅:800px;オーバーフロー:非表示;}
    背景:#abcdef;
    div:nth-child(1){テキストオーバーフロー:クリップ;}
    div:nth-child(2){テキストオーバーフロー:ellipsis;}
    div:nth-child(3){テキストオーバーフロー:">>";}
    div:nth-child(4){テキストオーバーフロー:クリップ;}
    div:nth-child(5){テキストオーバーフロー:ellipsis;}
    div:nth-child(6){テキストオーバーフロー:">>";}
    div:nth-child(7){テキストオーバーフロー:クリップ;}
    div:nth-child(8){テキストオーバーフロー:ellipsis;}
    div:nth-child(9){テキストオーバーフロー:">>";}
</スタイル>
</head>
<本文>

    <div><span>クリップ</span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div><span>省略記号</span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
    <div><span>文字列</span>aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>


</本文>
</html>

オーバーフロー: 表示 | 非表示 | スクロール | 自動 | 継承

マウスオーバー時に隠しテキストを表示する

<!DOCTYPE html>
<html lang="ja" マニフェスト="index.manifest">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
    div{幅:800px;オーバーフロー:非表示;テキストオーバーフロー:省略記号;}
    div:hover{オーバーフロー:可視;}
</スタイル>
</head>
<本文>

    <div>ああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああああ</div>


</本文>
</html>

@font-face 互換性 IE9+

フォント形式

TrueType .ttf 最適化なし IE9+ との互換性

OpenType .otf は ttf のアップグレード版であり、IE と互換性がありません。

.woff Web バージョンに最適なフォント形式は TrueType/OpenType の圧縮形式です。これは IE9+ と互換性がありますが、携帯電話とは互換性がありません。

.eot IE固有のフォント形式

.svg svgフォント形式はIEおよびFirefoxと互換性がありません

カスタムフォント汎用テンプレート

<!DOCTYPE html>
<html lang="ja" マニフェスト="index.manifest">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
    @フォントフェイス{
        フォントファミリ:"myFont";
        src:url('font/myFont.eot'),/*IE9+ と互換性あり*/
            url('font/myFont.eot?#iefix') format('embedded-opentype'),/*IE6-8と互換性あり*/
            url('font/myFont.ttf') format('truetype'),/*携帯電話対応*/
            url('font/myFont.woff') format('woff'),/*すべてのブラウザと互換性があります*/
            url('font/myFont.svg#myFont') format('svg');/*iOS用に開発*/

    }
    p{font-family: 'myFont';} </style> </head> <body> <p>これは私のカスタムフォントです~</p> </body></html>

特殊フォントを入手するためのウェブサイト: https://www.fontsquirrel.com/tools/webfont-generator

海外のサーバーなのでダウンロード速度は比較的遅いです

注: このソフトウェアで変換されたフォント形式は英語版のみをサポートしていることが個人的にわかりました。

他の国内オンライン変換ツールやウェブサイトを使用することをお勧めします

フォントファイル

<!DOCTYPE html>
<html lang="ja" マニフェスト="index.manifest">
<ヘッド>
<メタ文字セット="UTF-8">
<title>ドキュメント</title>
<スタイル>
    @フォントフェイス {
        フォントファミリー: '楊仁東竹石';
        src:url('myfont/杨任东竹石体.eot'),/*IE9+と互換性あり*/
            url('myfont/杨任东竹石体.eot?#iefix') format('embedded-opentype'),/*IE6-8と互換性あり*/
            url('myfont/杨任东竹石体.ttf') format('truetype'),/*携帯電話対応*/
            url('myfont/杨任东竹石体.woff') format('woff'),/*すべてのブラウザに対応*/
            url('myfont/杨任东竹石体.svg#杨任东竹石体') format('svg');/*iOS用に開発*/
    }
    p{font-family: '楊仁東竹石';font-size:24px;}
</スタイル>
</head>
<本文>

    <p>こんにちは、これは私のフォントです~これは私のカスタムフォントです~</p>

</本文>
</html>

成功しました〜〜〜

要約する

以上、CSS3 の新しいテキストとフォントの設定についてご紹介しました。お役に立てれば幸いです。

<<:  HTMLのタグと要素の違いの詳細な説明

>>:  MySQLでorder byを使用せずにランキングを実装する3つの方法のまとめ

推薦する

シェルスクリプトを使用して Docker サービスを一括で開始および停止する

目次Dockerを起動するDockerを停止するPython 呼び出しスクリプト最近、日々のテストで...

Linux で so または実行可能プログラムの依存ライブラリを表示します

Linux で実行可能プログラムまたは so の依存ライブラリを表示します。 Linux の実行可能...

TypeScript におけるジェネリックケースの詳細な説明

ジェネリックの定義 // 要件 1: ジェネリックは指定されていないデータ型をサポートできるため、渡...

Linux manコマンドの具体的な使い方

01. コマンドの概要Linux には充実したヘルプ マニュアルが用意されています。コマンドのパラメ...

MySQL シーケンス AUTO_INCREMENT の詳細な説明とサンプルコード

MySQL シーケンス AUTO_INCREMENT の詳細な説明とサンプルコードMySQL シーケ...

MySQLデータベースの共通操作スキルのまとめ

この記事では、MySQL データベースの一般的な操作テクニックをまとめます。ご参考までに、詳細は以下...

JavaScript で H5 ゴールド コイン関数を実装する (サンプル コード)

今日は春節の金貨の赤い封筒のアクティビティを作りました。なかなか良い出来だと思います。皆さんと共有し...

小規模プロジェクトで Vue が点滅するのを防ぐ方法

まとめHTML: 要素と v-cloak CSS: [v-cloak]{表示: なし}プロセスページ...

Dockerイメージ構築原理の分析(Dockerをインストールしなくてもイメージを構築できる)

イメージの構築は、DevOps プロセスにおいて非常に重要なプロセスです。一般的に、イメージの構築と...

カーソル ループを使用して、MySQL ストアド プロシージャで一時テーブルを読み取る

カーソルカーソルは、結果セット内のデータを表示または処理するために使用される方法です。カーソルを使用...

JavaScript 関数のカリー化

目次1 関数カリー化とは何ですか? 2 カレーの役割と特徴2.1 パラメータの再利用2.2 早期復帰...

VMWARE で Centos8 仮想マシンをコピーすることによって発生する IP 損失の問題の解決策

VMwareでcentos8サービスをインストールしてコピーすると、次の問題が発生します。 コピー前...

初心者がHTMLタグを学ぶ(3)

関連記事:初心者が学ぶ HTML タグ (2)導入された HTML タグは、必ずしも XHTML 仕...

Linux でアップロードされたファイルのスケジュールされたバックアップと増分バックアップを実装する方法

導入Alibaba Cloud のような OSS ストレージ サービスを使用している場合は、サービス...

Hadoop を使用せずに Linux 環境に Spark のスタンドアロン バージョンをインストールする方法

ビッグデータはますます注目を集めており、ビッグデータのいくつかの構成要素に精通していないと、自慢でき...