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>