CSS => 타이포그래피

통사론

글꼴 : [ font-style ] [font-variant] [font-weight] 글꼴 크기 [/ line-height] font-family ;
글꼴 스타일 : 글꼴 스타일
글꼴 변형 : 글꼴 변형
font-weight : font-weight ;
font-size : font-size ;
line-height : line-height ;
font-family : font-family ;
색깔 : 색깔 ;
따옴표 : none | string | initial | 상속 ;
font-stretch : font-stretch ;
텍스트 정렬 : 텍스트 정렬 ;
텍스트 들여 쓰기 : 길이 | 초기 | 상속 ;
텍스트 오버 플로우 : 클립 | 생략 | 문자열 | 초기 | 상속 ;
text-transform : none | 대문자 | 대문자 | 소문자 | 이니셜 | 상속 ;
텍스트 그림자 : h- 그림자 v- 그림자 흐림 반경 색상 | none | initial | 상속 ;
font-size-adjust : number | none | initial | 상속;
글꼴 스트레치 : 초 응축 된 | 여분 응축 된 | 응축 된 | 반 응축 된 | 정상 | 반 팽창 | 확장 | 추가 확장 | 초 확장 | 초기 | 상속;
하이픈 : 없음 | 매뉴얼 | 자동 ;
tab-size : number | length | initial | 상속 ;
letter-spacing : 정상 | 길이 | 처음 | 상속하십시오 ;
단어 간격 : normal | length | initial | 상속 ;

매개 변수

매개 변수	세부
글꼴 스타일	`italics` 또는 `oblique`
글꼴 변형	`normal` 또는 `small-caps`
글꼴 두께	`normal` , `bold` 또는 100에서 900 사이의 숫자.
글꼴 크기	`%` , `px` , `em` 또는 다른 유효한 CSS 측정 값으로 주어진 글꼴 크기
선 높이	`%` , `px` , `em` 또는 다른 유효한 CSS 측정으로 주어진 줄 높이
글꼴 모음	이것은 가족의 이름을 정의하기위한 것입니다.
색깔	`red` , `#00FF00` , `hsl(240, 100%, 50%)` 등의 유효한 CSS 색상 표현
글꼴 늘이기	글꼴에서 신빙성 또는 확장 된 얼굴을 사용할지 여부. 유효한 값은 `normal` , `ultra-condensed` , `extra-condensed` , `condensed` , `semi-condensed` , `semi-expanded` , `expanded` , `ultra-expanded` `extra-expanded` 또는 `ultra-expanded`
텍스트 정렬	`start` , `end` , `left` , `right` , `center` , `right` `justify` , `match-parent`
텍스트 장식	`none` , `underline` , `overline` , `line-through` , `initial` , `inherit` ;

비고

text-shadow 속성은 Internet Explorer 버전이 10 미만인 경우 지원되지 않습니다.

글자 크기

HTML :

<div id="element-one">Hello I am some text.</div>
<div id="element-two">Hello I am some smaller text.</div>

CSS :

#element-one {
    font-size: 30px;   
}

#element-two {
    font-size: 10px;
}

#element-one 안의 텍스트는 30px 이고 #element-two 안의 텍스트는 10px 크기입니다.

글꼴 속기

구문 :

element {
    font: [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family];
}

모든 글꼴 관련 스타일을 하나의 선언으로 font 약어로 사용할 수 있습니다. font 속성을 사용하고 값을 올바른 순서로 넣기 만하면됩니다.

예를 들어 모든 p 요소를 글꼴 크기 20px로 굵게 글꼴 패밀리로 Arial을 사용하려면 일반적으로 다음과 같이 코드화합니다.

p {
    font-weight: bold;
    font-size: 20px;
    font-family: Arial, sans-serif;
}

그러나 폰트 단축은 다음과 같이 압축 될 수 있습니다.

p {
    font: bold 20px Arial, sans-serif;
}

참고 : font-style , font-variant , font-weight 및 line-height 는 선택 사항이므로이 예제에서는 세 개를 건너 뜁니다. 바로 가기를 사용하면 주어진 다른 특성이 재설정 된다는 점에 유의해야합니다. 또 다른 중요한 점은 글꼴 바로 가기가 작동하는 데 필요한 두 가지 속성이 font-size 및 font-family 입니다. 둘 다 포함되어 있지 않으면 바로 가기가 무시됩니다.

각 속성의 초기 값 :

font-style: normal;
font-variant: normal;
font-weight: normal;
font-stretch: normal;
font-size: medium;
line-height: normal;
font-family - 사용자 에이전트에 의존

글꼴 스택

font-family: 'Segoe UI', Tahoma, sans-serif;

브라우저는 위 속성에 의해 목표 된 요소 내의 문자에 글꼴 "Segoe UI"를 적용하려고 시도합니다. 이 글꼴을 사용할 수 없거나 글꼴에 필요한 문자에 대한 글리프가없는 경우 브라우저는 Tahoma 및 필요한 경우 사용자의 컴퓨터에있는 sans-serif 글꼴로 폴백합니다. "Segoe UI"와 같이 하나 이상의 단어가있는 글꼴 이름은 모두 작은 따옴표 또는 큰 따옴표로 묶어야합니다.

font-family: Consolas, 'Courier New', monospace;

브라우저는 위의 속성이 대상으로하는 요소 내의 문자에 글꼴 "Consolas"를 적용하려고 시도합니다. 이 글꼴을 사용할 수 없거나 글꼴에 필요한 문자에 대한 문자 모양이 포함되어 있지 않으면 브라우저는 "Courier New"로 되돌아 가고 필요한 경우 사용자 컴퓨터의 고정 폭 글꼴을 사용합니다.

문자 간격

h2 {
  /* adds a 1px space horizontally between each letter;
     also known as tracking */
  letter-spacing: 1px;
}

letter-spacing 속성은 텍스트의 문자 사이 간격을 지정하는 데 사용됩니다.

! letter-spacing은 음수 값도 지원합니다.

p {
  letter-spacing: -1px;
}

참고 자료 : https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing

텍스트 변환

text-transform 속성을 사용하면 텍스트의 대소 문자를 변경할 수 있습니다. 유효한 값은 uppercase , capitalize , lowercase , initial , inherit 및 none

CSS :

.example1 {
    text-transform: uppercase;
}
.example2 {
    text-transform: capitalize;
}
.example3 {
    text-transform: lowercase;
}

HTML

<p class="example1">
    all letters in uppercase  <!-- "ALL LETTERS IN UPPERCASE" -->
</p>
<p class="example2">
    all letters in capitalize <!-- "All Letters In Capitalize (Sentence Case)" -->
</p>
<p class="example3">
    all letters in lowercase  <!-- "all letters in lowercase" -->
</p>

텍스트 들여 쓰기

p {
    text-indent: 50px;
}

text-indent 속성은 요소의 텍스트 내용의 첫 번째 줄 시작 전에 수평 공간 텍스트를 얼마나 많이 이동해야하는지 지정합니다.

자원:

텍스트 장식

text-decoration 속성은 text-decoration 을 설정하거나 제거하는 데 사용됩니다.

h1 { text-decoration: none; }
h2 { text-decoration: overline; }
h3 { text-decoration: line-through; }
h4 { text-decoration: underline; }

텍스트 장식은 텍스트 장식 스타일 및 텍스트 장식 색상과 함께 약어로 사용할 수 있습니다.

.title { text-decoration: underline dotted blue; }

이 버전은

.title {
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-decoration-color: blue;
}

다음 속성은 Firefox에서만 지원된다는 점에 유의해야합니다.

텍스트 장식 색
텍스트 장식 라인
텍스트 장식 스타일
텍스트 장식 스킵

텍스트 오버플로

text-overflow 속성은 오버플로 된 콘텐츠가 사용자에게 전달되어야하는 방식을 처리합니다. 이 예제에서 ellipsis 는 잘린 텍스트를 나타냅니다.

.text {
  overflow: hidden;
  text-overflow: ellipsis;
}

불행히도 text-overflow: ellipsis 는 한 줄의 텍스트에서만 작동합니다. 표준 CSS의 마지막 줄에 줄임표를 지원할 방법은 없지만 flexbox의 비표준 웹킷 전용 구현으로 얻을 수 있습니다.

.giveMeEllipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: N; /* number of lines to show */
   line-height: X;        /* fallback */
   max-height: X*N;       /* fallback */
}

예 (Chrome 또는 Safari에서 열림) :

http://jsfiddle.net/csYjC/1131/

자원:

https://www.w3.org/TR/2012/WD-css3-ui-20120117/#text-overflow0

단어 간격

word-spacing 속성은 태그와 단어 사이의 간격 동작을 지정합니다.

가능한 값

양수 또는 음수 길이 ( em px vh cm 등 사용) 또는 백분율 ( % 사용)
키워드 normal 은 글꼴의 기본 단어 간격을 사용합니다.
키워드 inherit 은 부모 요소의 값을 사용합니다.

CSS

.normal    { word-spacing: normal; }
.narrow    { word-spacing: -3px; }
.extensive { word-spacing: 10px; }

HTML

<p>
  <span class="normal">This is an example, showing the effect of "word-spacing".</span><br>
  <span class="narrow">This is an example, showing the effect of "word-spacing".</span><br>
  <span class="extensive">This is an example, showing the effect of "word-spacing".</span><br>
</p>

온라인 데모

직접 해보기

추가 읽기 :

텍스트 방향

div {
    direction: ltr; /* Default, text read read from left-to-right */
}
.ex {
    direction: rtl; /* text read from right-to-left */
}
.horizontal-tb {
    writing-mode: horizontal-tb; /* Default, text read from left-to-right and top-to-bottom. */
}
.vertical-rtl {
    writing-mode: vertical-rl; /* text read from right-to-left and top-to-bottom */
}
.vertical-ltr {
    writing-mode: vertical-rl; /* text read from left-to-right and top to bottom */
}

direction 속성은 요소의 가로 방향 텍스트 방향을 변경하는 데 사용됩니다.

구문 : direction: ltr | rtl | initial | inherit;

writing-mode 속성은 텍스트의 정렬을 변경하여 언어에 따라 위에서 아래로 또는 왼쪽에서 오른쪽으로 읽을 수 있습니다.

구문 : direction: horizontal-tb | vertical-rl | vertical-lr;

글꼴 변형

속성 :

표준

글꼴의 기본 속성.

작은 모자들

모든 문자를 대문자로 설정 하지만 원본 문자의 소문자는 원래 대문자 인 문자보다 작게 만듭니다.

CSS :

.smallcaps{
   font-variant: small-caps;
}

HTML :

<p class="smallcaps">
    Documentation about CSS Fonts
    <br>
    aNd ExAmpLe
</p>

출력 :

참고 : font-variant 속성은 font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures 및 font-variant-east-asian 속성의 약자입니다.

인용 부호

quotes 속성은 <q> 태그의 시작 및 끝 인용 부호를 사용자 정의하는 데 사용됩니다.

q {
    quotes: "«" "»";
}

텍스트 그림자

텍스트에 그림자를 추가하려면 text-shadow 속성을 사용하십시오. 구문은 다음과 같습니다.

text-shadow: horizontal-offset vertical-offset blur color;

흐림 반경없는 그림자

h1 {
  text-shadow: 2px 2px #0000FF;
}

이 표제 주위에 파란색 그림자 효과가 생깁니다.

흐림 반경이있는 그림자

흐림 효과를 추가하려면 옵션 blur radius 인수를 추가하십시오.

h1 {
  text-shadow: 2px 2px 10px #0000FF;
}

여러 그림자

요소에 여러 그림자를 지정하려면 쉼표로 구분하십시오

h1 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow

CSS
타이포그래피

수색…

통사론