CSS 글꼴 다시 사용
font-size
·% 를 지정합니다.
상위 요소 글꼴 크기의 백분율을 사용하여 지정합니다.
• 키워드 지정
xx-small、x-small、small、medium、large、x-large、xx-large
・smiler、larger
부모 요소에 비해 한 단계 작거나 크다.
크기 지정 단위
・px
화면 1px를 1로 하는 단위.
・pt
1/72인치(워드프로세서 등에 사용되는 단위)
1인치 = 2.54cm
・em
○ font-size로 지정할 때
부모 요소의 font-size 속성 값이 1인 단위입니다.
예를 들어 부모 요소가 12px일 때
font-size:0.5em
는 6px로 지정하고, font-size:1.5em
는 18px로 지정한다.○ 기타 요소 지정 시
요소로 지정된 font-size 값은 1 단위입니다.
line-height
행 간격의 높이 지정하기
실수
학점을 추가하지 않고 실수(1.5등)로 지정한다.
글꼴 크기가 지정된 실수에 곱합니다.
단위별 실수
줄 간격은 px 등으로 지정합니다.
퍼센트
글꼴 크기의 백분율을 지정합니다.
・normal
브라우저가 적절한지 판단하는 줄 사이를 설정합니다.(브라우저에 따라 다름)
※ 실수 지정이 있는 이유
line-height도 하위 요소에 영향을 미친다.
line-hegiht의 값이 하위 요소에 영향을 미칠 때 '계산 결과' 의 값은 '지정된 값' 에 영향을 주지 않습니다.
글꼴 크기가 10px인 요소,line-height는 1.5em 또는 150%, 하위 요소의 글꼴 크기가 30px인 요소,line-height는 15px로 문자가 초과됩니다.그래서 라인하이트는 많은 경우에 실수로 지정된다.
<style media="screen">
#defalut{
font-size: 10px;
line-height:1.5em;(←これでは#largeのフォントがはみ出す。"1.5"で指定。)
}
#large{
font-size: 30px;
}
</style>
<div id="defalut">
<div>hello</div>
<div id="large">hello</div>
</div>
・ 부모 요소 값의 속성을 계승하지 않더라도 inherit을 지정하면 계승할 수 있다.font-family
/font 이름
Arial Bold 같은 글꼴 이름이 아니라 Arial 같은 글꼴 패밀리 이름을 지정합니다.
반각 공백과 기호 등이 있으므로 브라우저에서 글꼴을 인식할 수 있도록 ""을 추가합니다.
묵인
serif、sans-serif、cursive、fantasy、monospace
다섯 가지 키워드로 큰 종류를 지정하다.
표시되는 글꼴은 브라우저에 따라 다릅니다.
여러 개를 지정할 때 ""을(를) 추가하지 않습니다.
(cursive와fantasy가 일본어로 지정되었을 때 크롬이 식별되지 않음)
font-weight
100~900씩 100개씩 지정한다.
숫자가 작을수록 가늘다.
font-style
・italic
사체
・obique
일반 글꼴 비스듬히 보기
font 지정
font : font-sytle font-weight font-size/line-height font-family;
구문을 생성합니다.
※ font-size와 font-family 이외에는 생략할 수 있습니다.
(font-family 부모 요소가 지정하면 생략 가능)
#defalut{
font: italic 100 1.5em/2 serif;
}
text-align
블록 수준 요소로만 지정할 수 있습니다.
블록 레벨 요소의 전체 inline 요소의 행 정렬을 지정합니다.
text-decoration
・underline
・overline
・line-through(취소선)
・none
letter-spacing
문자 간격을 지정합니다.줄일 수도 있고.
지정 방법
단위 실수
・normal
text-indet
지정 방법
/단위가 있는 실수 (1em에서 1문자 띄우기 지정)
·%
text-transform
・uppercase
・lowercase (알파벳은 소문자로 표시)
・capitalize
공급업체 접두어
초안 단계의 기능은 처음에 공급업체의 접두사를 붙이는 것이다.
그러나 장래의 그 기능이 확정될 때를 감안하여 공급업체 접두사를 붙이지 않은 기능명을 미리 적는다.
Reference
이 문제에 관하여(CSS 글꼴 다시 사용), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/naogify/items/7e41f8507b4aa1a37e12텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)