フォントとテキスト

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

font-size


テキストのサイズを定義します.

font-family


フォント名にスペースがある場合は、引用符で囲みます.
順番にチェックした後、ユーザーのパソコンに存在するフォントを適用します.
body {
  font-family: "Times New Roman", Times, serif;
}
フォントの種類
serif, sans-serif, monospace, cursive, fantasy

font-weight


フォントの太さ.値として100～900を使用(100単位)
  • 300font-weight: light;
  • 400font-weight: normal;
  • 700font-weight: bold;

    • font-style

    .italic {
  font-style: italic;
}

    line-height


    テキストの高さを指定します.

    注意]ベースライン



    text-align


    テキストの水平方向の配置を定義します.
    行内要素はwidthプロパティを指定できないため、中心概念は存在しないため、text-algin: center;は適用されません.

    外部フォントの使用


    作業フォルダにインストールされているフォントを使用する場合
    @font-face {
  font-family: "JUA";  /* 쓰고자 하는 이름 지정 */ 
  src: url("../fonts/BMJUA_otf.otf");
}

/* 호환성 잡으려면 아래와 같이 첨부 */
@font-face { 
   font-family: 'NanumSquare'; 
   src: url(NanumSquareR.eot); 
   src: url(NanumSquareR.woff) format('woff'),
        url(NanumSquareR.ttf) format('truetype'); 
   font-weight: 400;  /* NanumSquare 폰트의 굵기를 400으로 지정 */
}

p {
  font-family: JUA, NanumSquare;
}
    🔖 フォントフォーマットttf(大容量)、woff(Web圧縮バージョン)、eot(IE 8以降)

    アイコン


    アイコンフォントテキストのようにデザインする

    ダウンロード


    https://fontawesome.comサイトからダウンロード
    CSSフォルダのall.cssファイルとWebfontsフォルダのsvgファイル以外のファイルを「マイワークフォルダ」に移動

    適用

    <head>
  <link href="font/fontawesome/css/all.css" rel="stylesheet">
</head>

<body>
  <div class="container">
     <i class="fab fa-instagram fa-4x"></i>
  </div>
</body>
    * {
  box-sizing: border-box;
}

.container {
  background-color: grey;
  width: 100px;
  height: 100px;
  border-radius: 50px;  /* =50% */
  padding-top: 18px;  /* 세로 길이 가운데 위치 조절 */
  text-align: center;
  color: #fff;
}
    gallery3d(4)
    Unbuffered low-level IO and Buffered high-level IO