ウェブサイトを作成していますか？ウェブページに独自のカスタムフォントを追加することで、標準のフォントを使用するよりも魅力的でユニークなものにすることができます。CSSの助けを借りて、あなたのウェブページを本当にカスタマイズし、目立たせることができます！この記事では、HTMLで独自のフォントを適用するための簡単な方法を紹介します。
1
任意のテキストエディタツールを使って、基本的なHTMLウェブページを作成します。 例えば、無料のWindowsシステム・アプリケーションであるメモ帳を使うことができます。すでにこの作業を行っている場合は、このステップを飛ばしてもかまいません。
- その際、.NET Frameworkを含める必要があります。
2
新しいフォント・フェイスを作成します。<style>タグの下に、@font-face{}プロパティを使用して新しいfont-familyを作成します。font-faceは、フォントにfont-familyが含まれており、さらにfont-weight、bold、italic、thinなどの副次的な属性が含まれていることを示します。
<!DOCTYPE html> <html> <style> @font-face { } </style> <h1>自作フォントを使ったタイトル</h1> <body> 自作フォントを使ってみました！</body> </html>
3
フォントに名前を付けます。font-face{}プロパティの括弧の間にfont-family: プロパティを使用します。font-family名は、HTML文書全体でフォントをどのように参照するかを示します。
- CSSスタイル内の各プロパティの後にはセミコロンを挿入し、それらが分離されていることを示します。 <!DOCTYPE html> <html> <style> @font-face { font-family: customfont; } </style> <h1>独自のフォントを使ったタイトル</h1> <body>独自のフォントを使いました！ </body> </html>
4
フォントファイルを追加します。font-face{}プロパティの括弧の間にsrc=url（）プロパティを使用し、src=url（）プロパティの括弧の間にフォントファイルを記述します。
- CSSはTTF、OTF、WOFF、SVG、EOTのフォントファイル形式を受け入れます。
- フォントファイルがHTMLファイルと同じ場所に保存されていることを確認してください。例えば、/downloads/customfont.ttfのように。
- CSSスタイル内の各プロパティの後にセミコロンを挿入し、分離されていることを示します。<!DOCTYPE html> <html> <style> @font-face { font-family: customfont; src=url (myfont.ttf); } </style> <h1>自作フォントを使ったタイトル</h1> <body> 自作フォントを使ってみました！ </body> </html>
5
テキストを編集します。styleタグの下に新しいstyle属性を作成し、編集したい属性を指定します。 この例では、h1 {}を使ってタイトルのフォントを変更します。
<!DOCTYPE html> <html> <style> @font-face { font-family: customfont; src=url (myfont.ttf); } h1 { } </style> <h1>自作フォントを使ったタイトル</h1> <body> 自作フォントを使ってみました！ </body> </html>
6
フォントをテキストに追加します。新しく作成したstyleプロパティの下にあるfont-family: プロパティを使用し、コロンの後にフォントの名前を指定します。
- CSSスタイル内の各プロパティの後にはセミコロンを挿入し、それらが分離されていることを示します。<!DOCTYPE html> <html> <style> @font-face { font-family: customfont; src=url (myfont.ttf); } h1 { font-family: customfont; } </style> <h1>自作フォントを使ったタイトル</h1> <body> 自作フォントを使いました！</body> </html> </html
7
テキストに色をつける テキストの作成したstyleプロパティの下にあるcolor:プロパティを使用し、コロンの後に希望のフォントの色を指定します。
- CSSスタイル内の各プロパティの後にはセミコロンを挿入し、分離されていることを示します。<!DOCTYPE html> <html> <style> @font-face { font-family: customfont; src=url (myfont.ttf); } h1 { font-family: customfont; color: pink; } </style> <h1>自作フォントを使ったタイトル</h1> <body>自作フォントを使いました！</body> </html>
8
フォントサイズを変更する。 テキストのstyleプロパティの下にあるfont-size:プロパティを使って、コロンの後にピクセル単位でフォントのサイズを指定します。
- CSSスタイル内の各プロパティの後には、区切られていることを示すセミコロンを挿入します。<!DOCTYPE html> <html> <style> @font-face { font-family: customfont; src=url (myfont.ttf); } h1 { font-family: customfont; color: pink; font-size: 40px; } </style> <h1>自作フォントを使ったタイトル</h1> <body>自作フォントを使いました！</body> </html> <h1>自作フォントを使いました。
9
拡張子.htmlを使ってファイルを保存します。ファイル "から "名前を付けて保存 "を押して、ファイル名を付け、最後に.htmlを付けるようにしてください。このステップは重要です。拡張子を変更しないと、ファイルはテキストファイルとしかみなされません。
10
フォントをテストしてください。正しく表示されていれば、カスタムフォントを使用してテキストが表示されているはずです。テキストの位置は、フォントを適用した場所によって異なります。
コメント
最新を表示する
NG表示方式
NGID一覧