차례:
비디오: CSS3 - 09 [CSS 폰트] 폰트설정하기, 구글 웹폰트, font-family, google web font 2024
iPhone 또는 iPad 사이트 용 CSS 3을 만들면 맞춤식 글꼴 및 그림자를 표시 할 수 있지만 크기가 다른 화면의 텍스트 크기를 조정해야하는 어려움이 있습니다. 더 이상 걱정할 필요가 없습니다: CSS 3을 사용하여 텍스트 크기 조정을 가장 잘 관리하고 스타일 지정 텍스트의 기쁨을 발견하는 방법을 찾으십시오.
텍스트 크기 조정
iPhone에서 텍스트를 더 쉽게 읽을 수 있도록 기본값 텍스트 크기 조정 규칙 설정은 자동입니다. 텍스트는 자동으로 화면에 맞게 조정됩니다.
큰 화면에서는 텍스트의 크기를 자동으로 조정할 필요가 없기 때문에 iPad에서는 기본값이 none입니다. 많은 웹 사이트에서이 조정을 통해 페이지를 더 쉽게 읽을 수 있지만, 페이지를 신중하게 디자인하고 iPhone 또는 iPad에만 맞춤 스타일을 지정한 경우 자동 크기 조절을 방지 할 수 있습니다.
이 옵션을 사용하는 방법에 대한 세 가지 예는 다음과 같습니다.
-webkit-text-size-adjust: auto; -webkit-text-size-adjust: none; -webkit-text-size-adjust: 80 %;
다음은 webkit-text-size-adjust 규칙을 none으로 설정 한 코드 예제입니다. 한 번에 모든 태그에 대한 스타일의이 비트를 포함하면 태그의 텍스트가 자동으로 크기 조정되지 않습니다.
텍스트 그림자 추가CSS 3을 사용하여 텍스트 및 블록 레벨 요소에 드롭 그림자를 태그.
WebKit 브라우저의 텍스트 그림자 구문은 다음과 같습니다.
text-shadow: 가로 세로 흐림 반경 색상;
이러한 자리 표시자를 채우는 것이 텍스트 그림자에 미치는 영향은 다음과 같습니다.
horizontal 및 vertical - 수평 및 수직 오프셋을 지정하는 처음 두 값이 필요합니다. 드롭 그림자가 텍스트의 아래쪽과 오른쪽으로 확장되는 거리를 지정합니다.
-
blur radius - 그림자의 흐림 정도를 지정하는 세 번째 설정은 선택 사항입니다. 흐림 반경을 포함하지 않으면 기본값은 0이며 지정된 색상이 단색으로 나타납니다.
-
color - 16 진수 색상 코드 (전통 6 문자 색상 코드) 또는 RGBa 색상 코드를 사용하여 빨간색, 녹색 및 파란색과 불투명도를 지정할 수있는 색상을 지정합니다. (잠시 후 RGBa에 대해 더 자세히 설명합니다.)
-
다음 코드 행은
태그에 텍스트 그림자를 추가합니다. 숫자는 텍스트 그림자가 3 픽셀 흐림 효과를 사용하여 텍스트 오른쪽 아래 두 픽셀을 확장하도록 지정합니다. 이 예제에서는 16 진수 색상 코드 # 999로 지정된 회색 색상을 사용합니다.
h1 {text-shadow: 2px 2px 3px # 999;}
색상을 RGBa 색상으로 지정하면 부분적으로 투명한 색상을 정의 할 수 있습니다. RGBa 색상은 원하는 빨강, 파랑 또는 녹색의 양을 지정하는 일련의 숫자로 정의됩니다. 숫자 범위는 0에서 255까지입니다.
네 번째 숫자는 불투명도 또는 투명도를 정의합니다. 전체 투명도의 경우 범위는 1이고 완전한 투명도의 경우 범위는 0입니다. 다음 예제의 6은 60 %의 불투명도 레벨을 나타냅니다. 기본 색상의 40 %가 빛납니다.
앞의
태그에 대해 정의 된 스타일은 제목 1 태그로 포맷 된 모든 텍스트에 적용됩니다. 아래 스타일은 클래스 스타일입니다 (이름 앞에 점으로 표시됨). 클래스 스타일은보다 다양하며 페이지의 모든 텍스트에 적용 할 수 있습니다.
. 그림자 {text-shadow:. 2em. 2em. CSS에서 크기는 앞의 예에서 사용 된 픽셀, 백분율 및 em 옵션을 비롯한 다양한 측정 값으로 지정할 수 있습니다.
