집 >웹 프론트엔드 >CSS 튜토리얼 >CSS3의 한자 및 글꼴 관련 속성 소개

CSS3의 한자 및 글꼴 관련 속성 소개

不言원래의: 2018-08-24 10:37:071605검색

이 글은 CSS3 한자 및 글꼴과 관련된 속성을 소개합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1 text-shadow 속성

(1) 함수

은 페이지에 그림자효과 를 추가하세요.

(2) 사용 방법

text-shadow : 길이 길이 길이 색상(텍스트에서 그림자의 가로 거리, 세로 거리, 흐림 반경 그림자, 그림자의 색상 )

참고:

텍스트에서 그림자의 가로 및 세로 거리 # 🎜🎜#: 반드시 지정해야 하며, 음수 값을 지정할 수 있습니다.

그림자의 흐림 반경: 그림자가 바깥쪽으로 흐려질 때의 흐림 범위를 나타냅니다. 반경이 클수록 그림자가 바깥쪽으로 더 넓어집니다. 선택적 매개변수이며 생략할 경우 기본값은 0입니다. 이는 그림자가 바깥쪽으로 흐려지지 않음을 의미합니다.

Shadow color: 선택 매개변수, 지정하지 않으면 색상 속성의 색상이 CSS2에서 사용됩니다(실제 Firefox 및 Opera, 기타에서는 생략을 지원하지 않습니다. 그렇지 않으면 그려지지 않습니다), 브라우저에서 지정한 기본 색상이 CSS3에서 사용됩니다.

(4) 여러 그림자 지정

text-shadow：10px 10px #f39800,
                         40px 35px #fff100,
                        70px  60px #c0ff00；

Chrome, Firefox, Opera 브라우저에서만 이 기능을 지원합니다.

(3) 브라우저 지원

현재까지: Safari, Chrome, Firefox 및 Opera 브라우저는 이 속성을 지원합니다.

text-shadow: 5px 5px 5px 회색(회색 그림자, 그림자는 가로 및 세로 방향 모두에서 분자를 5픽셀로 유지)

2 word-break 속성

(1) 기능:

텍스트 자동 줄 바꿈

(2) 값: 일반(브라우저 사용) 기본 래핑 규칙), keep-all(반각 공백이나 하이픈에서만 줄 바꿈 가능), break-all(단어 내 줄 바꿈 허용)

(3) 브라우저 지원

# 🎜🎜 #지금까지: Safari, Chrome 및 IE 브라우저는 이 속성을 지원합니다.

3 단어 줄 바꿈 속성

(1) 기능:

긴 단어 및 URL 주소가 자동으로 줄 바꿈되도록 함

. (2) 값: 일반(브라우저 기본 처리), break-word(긴 단어 또는 URL 주소 내부의 줄바꿈)

(3) 브라우저 지원: 모든 브라우저.

4개 웹 글꼴 및 @font-face 속성

(1) 기능:

웹 페이지에 서버측 글꼴 표시 # 🎜🎜#.

(2) 사용 방법:

@font-face{
    font-famliy：WebFont；
    src：url（‘font/Fontin_Sans_R_45b.otf’）  format（“opentype”）；
   font-weitht：normal；
}
h1{
    font-family：WebFont；
}

5 글꼴 크기 조정 속성

(1) 기능 : 글꼴 크기는 그대로 유지하면서 글꼴 유형을 수정합니다.

(2) 사용 방법:

aspect 값(비례 값): 사용할 수 있습니다. 다른 글꼴로 변경할 때 글꼴 크기를 거의 동일하게 유지하십시오. (상수)

계산 방법: x 높이 값(이 글꼴에 쓰여진 소문자 X의 높이(픽셀 단위))를 글꼴 크기로 나눈 값입니다.

p{
   font-size：16px；
   font-famliy：Times New Roman；
   font-size-adjust：0.46（aspect值）
}

(3) 브라우저의 가로세로 값 계산 방법:

font-size-adjust 속성에 가로세로 값을 지정하고 글꼴을 다른 글꼴로 변경한 후 찾아보기 프로세서에 의해 수정된 글꼴 크기의 계산 공식:

c = (a / b)s

a: 실제로 사용된 글꼴의 가로세로 값을 나타냅니다. b: 수정 전을 나타냅니다. 글꼴의 가로세로 값

s: 지정된 글꼴 크기를 나타냅니다.

, c: 브라우저에 실제로 표시되는 글꼴 크기입니다.

(4) 속성 값은 "none"으로 설정할 수 있습니다.

이는 글꼴 크기 조정 속성을 설정하지 않고 원본에 따라 표시하는 것과 같습니다. 글꼴의 크기.

6 rem 단위를 사용하여 글꼴 크기 정의

(1) rem 글꼴 크기 단위는 root를 기준으로 합니다. 페이지의 요소#🎜 실제 글꼴 크기는 요소의 상위 요소의 글꼴 크기와 관계없이 🎜#(일반적으로 html 요소 참조)의 글꼴 크기를 기준으로 계산됩니다.

html｛font-size：62.5%｝（大多数浏览器中，默认字体大小为16个像素，使用62.5%， 使浏览器自动计算出10个像素）
small｛font-size：1.1rem；｝
strong｛font-size：1.8rem；｝

(2) 브라우저 지원: 지금까지: IE9를 포함한 모든 브라우저가 지원됩니다.

(3) IE8 및 이전 버전과 호환됩니다(rem 글꼴 단위는 사용할 수 없습니다)

html｛font-size：62.5%｝
small｛font-size：11px；font-size：1.1rem；｝
strong｛font-size：18px；font-size：1.8rem；｝

CSS3의 한자 및 글꼴 관련 속성 소개

1 text-shadow 속성

2 word-break 속성

(1) 기능:

(1) 기능:

(1) 기능 : 글꼴 크기는 그대로 유지하면서 글꼴 유형을 수정합니다.

(1) rem 글꼴 크기 단위는 root를 기준으로 합니다. 페이지의 요소#🎜 실제 글꼴 크기는 요소의 상위 요소의 글꼴 크기와 관계없이 🎜#(일반적으로 html 요소 참조)의 글꼴 크기를 기준으로 계산됩니다.

관련 기사