フォント、行の高さ、文字間隔

6374 ワード
テキストリンク
🔶 font-family:フォント設定
​
🔶フォントダウンロード
1.Webフォント:サーバから直接フォントを取得し、ドキュメントで使用します.(私のコンピュータも、コンピュータのフォントも必要ありません)

  • [英語のフォントが多いサイト]:https://fonts.google.com/

  • [ハングルフォントの多いサイト]:https://noonnu.cc/
    • 2.font-faceルールの使用
    :Web制作者が希望するフォントを使用できるようにし、パソコンにインストールされているフォントのみを使用する制限を排除します.
    :ユーザーが持っていないフォントを特定のパスに接続し、ダウンロードおよび使用できるように定義します.(?)
    <!DOCTYPE html>
<html lang="en">
<head>
 <style type="text/css">
   
  @font-face{
  	font-family: 'scFont'; /* 1.폰트이름을 맘대로 지음.(scFont)*/
  	src: url(./font/SCDream3.otf); /* 2.다운받은 폰트가 있는 경로를 지정*/
    font-weight: bold;
    font-style: italic;
  	  }

  H3{
  	font-family: "scFont"; /* 3.폰트이름을 갖다 씀*/ }
   
	</style>
</head>
<body>
	<h3>이사철 인테리어 Q&amp;A</h3>
</body>
</html>
    ​
    🔶 font-size

  • h 1:基本ブラウザのフォントサイズに比例したサイズです.
    *そのため、ユーザーによってサイズが異なる場合があります.
    →そのため、フォントサイズをスタイルとして指定することが望ましい.
  • 最近の基本テーマは16~18 pxで、内容は12~14 pxです.
    • ​
    🔶 text-装飾:装飾文字
  • none:装飾線なし(デフォルト)
  • 下線:下線
  • overline:
  • line-through:削除線(中間行)
    • 🔶 b,strong:厚字
  • bラベルは、視覚的に文字を厚くするだけです.
  • の強いラベルは、視覚的に文字が厚くなるだけでなく、音声リーダーが読むときに音声を強調表示して読み出す.
    • 🔶 i,em:文字の傾き
  • iラベル、美しく厚さ
  • emラベルは、その内容の意味を本当に強調しています.
    • 🔶block要素、inline要素
  • ブロック要素:幅が行全体を占めます.ex) p,
  • inline要素:幅のみがコンテンツ長です.ex) span, b , i
    • 🔶 line-height(行送り)、lete-spacing(字送り)

  • line-height:行間、文字「行間」の間隔を設定する
    -基本高さ:文字サイズ+5 px程度
    -フォントサイズより小さいサイズの場合は、テキストが重複します.

  • 文字間隔:文字間隔、ハングル文字間の間隔を設定します.
    • 🔆line-heightによる集中ソート

  • 1行のテキストを中央に上下に揃えた場合、行間隔の高さは高さ間隔と同じにする必要があります.
    (文字の上下の間隔が同じなので、中央揃えのように見えます.)

  • p要素の行の高さをdiv要素の高さと等しくし、p要素の上下の間隔を等しくして中央に揃えます.
    div {
       width: 100px;
       height: 100px;
       background-color: tomato;  }
     
p {
       text-align: center; /* 가로 중양정렬 */
       line-height: 100px; /* 세로 중앙정렬 */    }
/*html*/
<div>
   <p>12</p>
</div>
    •
    asp.Netコントロール開発(二)-単純属性
    主プロジェクト:データベースの作成[しゅこうもく:でーたべーすのさくせい]