Tsing フォント:クールなスタイルのフォント

この記事では、オープンソースの Tsing フォントを実際の例として使用して、カスタム フォントの作成と適用について説明します。 このプロセスは管理しやすいステップに分割されており、初心者に最適です。

この等幅フォントは、9x9 の正方形 (文字) と 11x11 の正方形 (数字) で構成されており、ユニークなビジュアル スタイルを示しています。 コード エディター (オタク フォントを使用した VIM など) から企業や大規模イベント (2022 年北京冬季オリンピックなど) のブランディングに至るまで、さまざまな状況におけるフォント デザインの重要性が強調されています。 Windows の起動アニメーションでも、アイコンにフォントが使用されています。

フォントのデザイン: ステップバイステップガイド

最初のステップは、フォントの目的と望ましい美学を定義することです。 等幅フォントの場合、たとえば:

各キャラクターは、定義されたグリッド (ここでは 9x9) 内で細心の注意を払って作成されます。

次に、デザインを使用可能なフォントに変換します。 これには、フォント デザイン ソフトウェアを使用して、SVG デザインを対応する Unicode 文字にマッピングすることが含まれます。

Birdfont: フォント作成ツール

このプロセスには、オープンソース ツール (GNU GPL v3 ライセンス) である Birdfont が推奨されます。 多くの Google フォントは SIL オープン フォント ライセンス (OFL) を使用しており、(商用であっても) 無料で使用できますが、再販は禁止されていることに注意してください。

Birdfont を使用したフォントの作成:

1. SVG の準備: キャラクターごとに適切な間隔で SVG ファイルを作成します。
2. SVG のインポート: これらを Birdfont にインポートし、Unicode ポイントにマッピングします。
3. 調整と最終化: 一貫性を保つためにデザインを調整します。
4. コア文字のデザイン: 少なくとも A ～ Z、0 ～ 9、および一般的な記号を含めます。
5. メタデータの設定: Birdfont 内でフォント名、説明などを定義します。
6. TTF としてエクスポート: 完成したフォントを TTF ファイルとしてエクスポートします。

Tsing フォントの例:

Tsing-font プロジェクト (SIL オープン フォント ライセンス) は、Figma および Birdfont プロジェクト ファイルを含む完全なサンプルとデモ Web サイトを提供します。

フォントの使用

フォント レンダリングのテストには、Ubuntu の「ガラスを食べても大丈夫です。私に害はありません」のようなフレーズが含まれることがよくあります。 単純な TTF はローカルで動作する可能性がありますが、ブラウザ間の互換性については考慮する必要があります。 Convertio などのツールを使用して、TTF を WOFF/WOFF2 に変換し、より広範なサポートを実現します。 CSS の @font-face ルールを使用してこれを実装します:

<code class="language-css">@font-face {
    font-family: "YourFontName";
    src: url("your-font.woff2") format("woff2"),
         url("your-font.woff") format("woff"),
         url("your-font.ttf") format("truetype");
}</code>

フォントの可能性を最大限に活用するには、技術的な側面を超えて、より広範なビジュアル コミュニケーションとマーケティングの側面を考慮してください。

フォントアプリケーション (例):

https://www.php.cn/link/dfdfab9941ac833a0c364aa2e608185e から Tsing フォントをダウンロードし、忘れずにサポートを示してください。

以上がTsing フォント:クールなスタイルのフォントの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。