フォントとアイコン

8029 ワード
CSS テキストリンク

フォント(Fonts)


フォントの統一


各
  • ブラウザのデフォルトの指定フォントは異なる場合がありますので、フォントを1つに統一することが望ましいです.
  • デフォルトのフォントを指定しないか、汎用でないフォントを使用すると、ユーザーが表示するスタイルや情報が異なる場合があります.
  • 位はCross Browsingで、웹표준을 준수하여 다른 기종, 브라우저 중 어느 하나에만 치우치지 않고 호환성을 높여 어느 환경에서도 잘 기능하는 웹사이트를 만드는 것を指しています.

    • フォントの最適化

  • フォントの容量が大きく、盲目的にフォントを読み込み、使用せず、本当に必要なフォントだけを読み込み、余分なデータをダウンロードしないことは、最適化の面で有利である.

    • フォント使用上の注意

  • は、利用可能なすべてのライセンスと同じですが、ライセンスが存在する場合は、そのライセンスがビジネスライセンスであるかどうかを確認するためにチェックして使用することが望ましいです.

    • Google Fonts

  • https://fonts.google.com/
  • Googleが提供するフォントライブラリは、フォントや提供された厚さなどを直接チェックすることができます.
  • Googleフォントが提供するすべてのフォントは、個人およびビジネス用途に使用できます.

    • Googleフォントの使い方


  • GoogleフォントWebサイトにログインします.
  • で希望するフォントを選択し、希望するスタイル(厚さ)を選択します.
  • の右側に作成されたメニューで、ドキュメントに書き込む方法(HTMLリンクラベル、CS@import)を選択し、ドキュメントに貼り付けます.
    (多くの場合HTMLが使用されます.)
    • 下に
  • と書いてあるCSSのfont-family属性を適用する場所に貼り付けます.
  • 参照URL-https://developers.google.com/fonts/docs/getting_started2

    • 例

    <!--HTML 문서-->
<head>
	<link rel="preconnect" href="https://fonts.googleapis.com">
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
	<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap" rel="stylesheet">
	<!--구글 폰트에서 제공하는 링크 태그-->
	<link rel="stylesheet" href="main.css 경로">
</head>
    /*CSS 문서*/
body {
	font-family: 'Noto Sans KR', sans-serif;
}
/*적용하고자 요소에 구글 폰트에서 제공한 CSS rules(CSS 속성과 속성값)를 붙혀넣기 한다.*/
  • フォントの場合は、主な用途として使用されるCSSファイルより先に作成する必要があります.
  • 外部(google font)は、フォントとして使用するCSSをまずネット上にロードし、ローカルのCSSドキュメントとともに使用します.

    • アイコン

  • の設計チームがあり、画像の作成を要求できる場合は、自分でアイコンを作成して画像をロードして使用することもできます.そうでなければ、ライブラリを使用することもできます.

    • 材料アイコン

  • https://fonts.google.com/icons?selected=Material+Icons
  • Googleフォントと同様、Googleが提供するアイコンライブラリ
  • で簡単に設定した後、指定したクラス名を使用して必要なアイコンを読み込むことができます.
  • 24 px*24 pxのサイズでロードします.

    • トピックアイコンの使用方法



  • HTMLドキュメントのhead領域にアイコンを使用するスタイルシート(リンクラベル)を読み込みます.
  • Googleフォントページの上部にあるiconsラベルに移動し、希望するアイコンを選択し、右側に表示されているhtmlコンテンツを貼り付けます.
  • 参照URL-https://developers.google.com/fonts/docs/material_icons2

    • 例

    <head>
	<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
	<!--머테리얼 아이콘을 사용하기 위한 스타일시트 불러오기-->
</head>
<body>
	<span class="material-icons">제공하는 아이콘의 이름</span>
	<!--아이콘을 선택한 후 우측에 표시된 html 내용 붙혀넣기-->
</body>

    +

  • で作成されたライブラリのほかにも、参照できるライブラリがたくさんあります.
  • 以上のライブラリがある以上、ライブラリを使用する前に、ビジネス用途に問題がないことを確認する習慣を身につけなければなりません.
    • C#符号化単純性の汎用編(短いC#コードの作成方法、随時更新)
    FileWriter追加ファイル書き込みで遭遇したピット、デフォルトはISO-8859-1またはUS-ACCI符号化