少なくとも典型的なものではありません。各文字は、CSSで構築されたHTML要素です。真のウェブフォント！
詳しく説明してください。これは、フォントをまったく使用せずにテキストをレンダリングする方法です。ランダムなテキストは、PHPとともに単語と文字に分割され、クラスを持つHTML要素としてレンダリングされます。すべての要素には、文字を作成するためのCSSでスタイルが付けられています。これは、CSSで制御された「Just」HTMLですが、それでもソフトウェアであり、メッセージを通過します。従来のフォントが行うすべてのプロパティがあるため、フォントと呼びます。フォーマットのないフォント。
免責事項：私はHTML、CSS、またはPHPの専門家ではありません。ここでやったことを達成するためのショートカットや簡単な解決策があると確信していますが、結果に満足しているので、プロセスと経験を紹介します。プレゼンテーションはチュートリアルではありません。それは私の限られたスキルに基づいた実験であり、そのように扱われるべきです。
このプロジェクトは5か月間持続することを意図したものではありませんでしたが、それが必要なことです！それはすべて、CSSアイコンでプレイすることから始まり、擬似要素を使用して形を作ることから始まりました。最初のSレターが完成すると、残りは比較的簡単でした。他の同様のプロジェクトがあるかどうかを確認しましたが、あまり見つかりませんでした。
当初、CSSで制御されたSVGフォントは良い考えのように思えました。このタスクをはるかに簡単にし（SVGは描画用に作成されます）、設計固有の効果に焦点を当てることができますが、生のHTML要素の柔軟性はありません。コンテキストに応じてSVGを変更することはできず、プロセスはすべての文字が固定された形状とコードがある従来のフォント設計に戻ります。
これは、WebおよびFontデザインのハイブリッドです。各文字は、任意のWeb要素のように構築され、インラインで使用されてフォントのように動作します。メトリック、重み、Opentype機能、その他すべてのフォントプロパティは、CSSファイルでのみ制御されます。
フォント設計は、要素の境界幅に基づいているため、非常に用途が広いためです。スクリプトフォントの免除により、同じ形状を使用して、境界のバリエーションだけからいくつかのスタイルと重みが生じる可能性があります。より複雑な文字では、クリップパスと背景を使用して、カットアウト効果を作成します。
ネストされた要素は、::前の::擬似要素の後にキャラクターを形成するのに十分ではないときに生成されます。幅、高さ、境界の幅にEM値を使用すると、後でフォントサイズを制御するのに役立ちます。これは黄金のルールの1つです。
文字（左）は、CSSアイコン（右）のように構築されます。大きな違いはありません。時々、文字は、サークルや線に基づいて、スティックマンのように構築しやすいことがあります。しかし、ここでは、国境とラジウスの財産の役割を本当に理解できるときです。個人的には、私は丸い境界線のファンではありませんでしたが、この経験は私の心を変えました。基本的に、半径ができることに制限はありません。
以下は、この記事のCSSフォントの2つの「実際の」例です。残りの例の図は、ブログ投稿で簡単に表示できるようにSVGに変換されます。
Serifプレビューはより複雑な状況を示しますが、いつものように、SANSフォントは対処する要素が少なくなり、ファイルが小さくなり、ロードが速くなります。これは実際には問題ではなく、論理的なだけです。CSSは、 @font-faceルールに埋め込まれたフォントの前に読み取られます。
最も難しい部分は、ピクセル比を打ち負かすか、擬似要素をベース形状に合わせることです。屋のサイズが変更されたときに、精巧な数式が失敗しました。ブラウザは各要素を個別に扱い、最も近い整数値にシフトします。
これに対する解決策は、可能な限り多くの擬似要素を作成し（余分な要素を含む）、メイン形状とは関係していない:: ::後のペアの1つの参照を使用することでした。この場合、ブラウザは要素をほぼ同じ位置にレンダリングします。
参照点のない文字を以下のSレターで示します。文字の上部と下部は、2つの擬似要素であり、頼るベース形状（上記のセリフの灰色の領域またはここの桁2の灰色の領域）はありません。
数百文字を作成した後、キャラクターはインライン変換（すなわちskew（）、rotate（）など）をサポートできないことに気付きます。これは、テキストの選択で視覚的に明白になります。そのため、擬似要素は完全に理にかなっています。私は本質的に言うだろう：2番目の黄金律。
FontソフトウェアよりもCSSでスタイルを作成する方が簡単に思えます。複数の文字の形状とサイズを一度に制御するオプションがあります。 CSSでは、同じルールセットでより多くの文字がグループ化されています。
CSSカスタムプロパティは、特に境界、幅、および位置を制御するために、この状況で非常に便利です。異なる重みは、変数の変化の結果であり、その後調整されます。キャラクターの形状とサイズが境界線の幅を考慮し、特に非対称の形状で異なる境界に比例して表示されない可能性があるため、微調整は避けられません。
カットアウト効果は、オーバーレイ要素に同じ背景色を追加し、ミックスブレンドモードを使用して色とエフェクトの組み合わせを使用して作成されます。
CSSでは、親の色に従うネストされた要素のカットアウト効果を作成するために、グローバルカラー変数が必要です（背景と一致する要素のオーバーレイ要素）。
バックグラウンドイメージのプロパティは、境界でのみ構築された文字では機能せず、要素にサイズまたは位置変換（スケール、回転、またはその他）がある場合、背景は変更されます。
背景を使用できない場合、ソリューションはMix-Blend-Mode：Lightenです。暗い背景とミックスブレンドモード：暗くなっています。軽い背景について。
マイナス面は、一部の効果が、可変特性を持つ要素に対して予期しない結果または反対の結果をもたらす可能性があることです。通常、フィルターは要素を完全なオブジェクトとして読み取ります。競合を防ぐために、境界と変換効果はフォント設計のために予約されています。
フォントはテキストを作成しません。そもそもアイデアは、依存関係なしにCSSと一緒にロードするテキストを作成することでした。そのためには、最良の選択肢はPHPです（私の新人の意見）。インライン関数を使用してHTMLをレンダリングすることに加えて、それは想像できるほとんどすべてのタスク次第です。 PHPがなければ、このプロジェクトは不可能です。
当然のことながら、PHPの最初のタスクは、ランダムなテキストを分割し、余分なスペースを削除し、それぞれが独自のクラスを持つすべての単語と文字の一致するグループを作成することでした。ここまでは順調ですね。私はスムーズに進んだ部分を主張しません。それは基本的な機能であり、スプリット、爆発、およびビデオゲームから借りた他のすべての言葉を使用しています。
それでも、私はこれまでこれに取り組んだことがないので、私は難しい方法を学ばなければなりませんでした。 PHPが「0」（ゼロ）をヌルと見なしていると誰も私に言ったので、一日はありません。ゼロが表示されない理由がわかりませんでした。
この問題を抱えている人にとっては、それは役に立つかもしれません。空の（）関数を使用する代わりに、以下の関数を使用しました。
関数is_blank（$ value）{
return empty（$ value）&&！is_numeric（$ value）;
}もう1つの主要な問題は、キャラクターの範囲でした。 HTML、.htaccessファイル、および特殊文字を認識するためだけにサーバー自体に設定が多すぎるようです。この解決策は、ThePHPドキュメントで数日後に発見され、Qeremy [atta] Gmail [dotta] comによって投稿されました。
function str_split_unicode（$ str、$ length = 1）{
$ tmp = preg_split（ '~~ u'、$ str、-1、preg_split_no_empty）;
if（$ length> 1）{
$ chunks = array_chunk（$ tmp、$ length）;
foreach（$ chunks as $ i => $ chunk）{
$ chunks [$ i] = join（ ''、（array）$ chunk）;
}
$ tmp = $ chunks;
}
$ tmpを返します。
}あなたが私に尋ねると、多くのチャンクがありますが、それは魅力のように機能し、すべての問題を解決します。この関数は基本的に言語設定を見落とし、標準以外の文字の設定でも読み取ります。 PHP関数にその文字が含まれている場合、Unicodeテーブルに深く埋まっている文字が認識されます。
この関数は、HTMLエンティティを必要とせずに、各文字を入力されたとおりに生成する可能性のみを作成します。このオプションは、HTML形式でのテキストの使用を制限しませんが、インラインコードを回避するか、代替案に置き換える必要があります。たとえば、非壊れたスペース（＆nbsp;）を使用する代わりに、要素を
これが解決された場合、次のステップは、各文字に特定の構造を作成することです。 HTML要素のクラスとネストされた要素の位置は、1つ以上のクラスに対応する文字の長いリストに依存します。最も基本的な文字の一部は、このリストから除外されていません（たとえば、小さな「A」文字にはフィニアルが必要であり、それは追加の要素/クラスを意味します）。
基本構造は、このようなものになります。
'”' => 'cacute c actute'
…これは、親のケーチ、C文字、急性アクセントの3つの要素をレンダリングします。結果は以下になり、赤い正方形は他の2つのプリセット要素を含む親要素を表します。
この手法は、ペアリングに基づいて、ディクリティクス（時には結晶）がフォントソフトウェアで構築される方法と非常に似ています。コンポーネント要素が変更されると、他のすべてが調整されます。
任意の要素には複数のアプリケーションがあるため、IDは回避され、クラスのみが使用されます。
PHP関数は、コンテキストに応じて異なる動作をするように設定されています。キャラクター認識は、CSSテキストをレンダリングする際にペアリングを置き換え、ライガチュアを作成するように設定されています。
CSSテキストのコンテキスト順序は、スタンドアロン文字ではなく、特定のクラスがありません。従来のOpentype機能とは異なり、文字は置き換えられていません。相互作用は、2番目の要素をスタイリングすることによりCSSで制御され、新しいキャラクターをマージまたは形成します。
特徴は、親コンテナに特定のクラスを追加してアクティブになります。キャラクターが登録されているかどうかに関係なく、すべてのブラウザで、フォント機能サポートの有無にかかわらず、どんな状況でも代替はレンダリングされます。
HTML要素には、フォントの重量の横に.CSSクラスがある長い間、CSSフォントを含めることができます。重みを選択するには、.thin、.light、。remulal、または.boldクラスが使用されます。
テキストにはHTML形式を持つことができます。プレーンテキストは必須ではありません。
PHPは、閉鎖特派員がいる場合、ブラケット（
また、レイアウトの好みに応じて、、、、などの特定のタグを、ネイティブの外観と動作をエミュレートおよびカスタマイズするオブジェクトとして扱うことができます。
CSSテキストは、境界を持つオブジェクトのグループであり、サイズとカラートリートメントのために開かれています。色を境界線と逆に考えてください。 ：代わりに初代：ファーストレッター。
フォントサイズは、ビューポート、パーセンテージ、ピクセル、EM、またはREMユニットを使用して、他のフォントと同じCSSファイルに設定されています。ピクセルで設定された値は、小数値で動作します。
テキストアライグとテキストインデントのプロパティは、デフォルトで機能します。テキストは、テキストコンテンツがなくても、任意のセットアップに合わせます。
テキスト内に配置されたブロックレベルの要素（eg
、
テキストに正しい効果を持つために新しいルールが必要になるために新しいルールが必要になるテキストのフォーマット要素（
以上がCSSフォントの作成（および潜在的な利点）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
