CSS3 노트 - 텍스트 및 글꼴 스타일

1. 문자에 그림자 추가 ---text-shadow

text-shadow: 5px 5px 0 red;

값은 왼쪽에서 오른쪽으로 구분됩니다. 그림자는 문자의 가로 거리, 세로 거리, 희미한 반경, 그림자 색상의 네 번째 값을 벗어나고FireFox와 Opera에서 생략할 수 있으며 color 속성의 색을 사용합니다.Safari 및 Chrome에서는 생략할 수 없으며 그렇지 않으면 그림자를 그릴 수 없습니다.
2. 텍스트를 자동으로 줄 바꾸기 ---word-break
브라우저의 기본 줄 바꾸기 규칙은 줄바꾸기가 사람들의 자연스러운 쓰기 방식에 부합된다.CSS3에서는 워드-break를 사용하여 줄 바꿈 처리 방식을 스스로 결정할 수 있습니다.이 속성은 IE에서 발전해 온 것이다.
브라우저의 기본 줄 바꿈 규칙을 사용하려면 다음과 같이 하십시오.

word-break: normal;

연속 중국어 간에는 줄 바꿈이 허용되지 않습니다(IE 지원, Safari 및 Chrome는 지원되지 않음).

word-break: keep-all;

단어 내에서 행을 바꿀 수 있습니다(행 맨 위에 문장부호가 있을 수 있음).

word-break: break-all;

3. 단어와 URL 주소 자동 줄 바꿈

word-wrap: break-word;

4. 서버 글꼴 ---웹 Font 및 @font-face 사용
CSS3에는 웹 Fonts 기능이 새로 추가되어 웹 페이지에서 서비스 측 글꼴을 사용할 수 있으며 어떤 글꼴이 서비스 측에 설치되어 있으면 웹 페이지에 정상적으로 표시될 수 있다.
@font-face를 사용하여 서버 글꼴 사용하기:

/**
 *          ，             
 */
@font-face{
    font-family: WebFont; //  WebFont         
    src: url('font/Fontin_Sans_R_45b.otf') format("opentype");
    font-weight: normal;
}
/**
 *          
 */
hi{
    font-family: WebFont; //         
}

src 속성 값에 서버 글꼴 파일의 경로를 지정하고format 속성 값에 글꼴 파일의 형식을 표시합니다. (글꼴 파일 형식을 생략할 수 있습니다.)위 코드는 exljbris 글꼴 회사에서 무료로 제공하는 Fontin Sans 글꼴을 사용하고 글꼴 파일 형식은 OpenType입니다.
지금까지 사용할 수 있는 파일 형식은 OpenType과 TrueType이고 format 값은 Opentype과truetype이며 파일 확장자는 각각'.otf'와'.ttf'이다.또한, IE에서는 마이크로소프트가 자체로 가지고 있는 Embedded의 OpenType 글꼴 파일만 사용할 수 있으며, 파일 확장자는'.eot'이며format 속성 값을 사용할 필요가 없다.
서버 글꼴을 사용할 때는 기울임꼴인지 굵은꼴인지 여부에 따라 다른 글꼴 파일을 사용할 수 있습니다.

/**
 *          ，             
 */
@font-face{
    font-family: WebFont;
    src: url('Fontin_Sans_R_45b.otf') format("opentype");
}
@font-face{
    font-family: WebFont;
    font-style: italic;
    src: url('Fontin_Sans_I_45b.otf') format("opentype");
}
@font-face{
    font-family: WebFont;
    font-weight: bold;
    src: url('Fontin_Sans_B_45b.otf') format("opentype");
}
@font-face{
    font-family: WebFont;
    font-style: italic;
    font-weight: bold;
    src: url('Fontin_Sans_BI_45b.otf') format("opentype");
}
/**
 *          
 */
div{
    font-family: WebFont;
    font-size: 14px;
}
div#div1{
    font-style: normal;
    font-weight: normal;
}
div#div2{
    font-style: italic;
    font-weight: normal;
}
div#div3{
    font-style: normal;
    font-weight: bold;
}
div#div4{
    font-style: italic;
    font-weight: bold;
}

5. 글꼴 종류를 수정하여 글꼴 크기를 그대로 유지---font-size-adjust
각 글꼴 유형에 대한 자체 aspect 값을 사용하려면 다음과 같이 하십시오.

div{
    font-size: 16px;
    font-family: Times New Roman;
    font-size-adjust: 0.46;
}

aspect 값은 글꼴을 다른 글꼴로 수정할 때 글꼴 크기를 변하지 않게 하는 데 사용됩니다.16px의 Times New Roman 글꼴을 Comic Sans MS 글꼴로 수정하고 글꼴 크기를 16px로 유지하려면 다음 단계를 수행합니다.

Times New Roman 글꼴의 aspect 값은 0.46

입니다.

Comic Sans MS 글꼴의 aspect 값은 0.54

0.54를 0.46으로 나눈 후 근사치 1.17

16px를 1.17로 나누어 약 14px를 얻은 다음 스타일에 글꼴 크기를 14px로 지정합니다.14px의 코믹 산스 MS는 16px의 타임즈 뉴로맨 글씨체에 해당한다는 것이다.

rem 글꼴 단위 사용

rem 루트 요소의 글꼴 크기에 따라 실제 글꼴 크기를 계산합니다.과거에 우리는 em를 사용했는데, em 단위는 부원소의 글꼴 크기에 따라 계산되기 때문에, 우리가 한 원소를 부원소에서 다른 부원소로 이동할 때 원소의 글꼴 크기에 변화가 생길 수 있다.em 단위를 제외하고, 우리도 px 단위를 사용하여 글꼴 크기를 지정합니다.그러나 오늘날 웹 사이트와 응용 프로그램은 각종 모바일 기기에서 실행될 수 있기 때문에 픽셀에만 의존해 글꼴 사이즈를 지정하면 다양한 사이즈의 화면에 따라 요소에 다양한 사이즈의 글꼴을 지정해야 할 수도 있어 화가 난다.따라서 우리는rem 단위를 사용해야 한다.
IE8을 제외한 브라우저는 rem 단위를 지원합니다.

html{font-size: 10px;}
/*   IE8 */
body{font-size: 14px; font-size: 1.4rem;}
12size{font-size: 12px; font-size: 1.2rem;}
16size{font-size: 16px; font-size: 1.6rem;}

IE8도rem.js 파일을 가져와서rem를 호환할 수 있습니다