자바스크립트 글꼴 크기
__del__ |
absolute |
circle |
exp |
find |
JavaScript |
mean |
resize |
sep |
sin |
system
Michael Zippo
CSS font-size 속성은 페이지나 웹사이트에 있는 모든 텍스트 요소의 글꼴 크기를 설정합니다. 글꼴 크기 속성은 텍스트 콘텐츠를 포함하는 모든 클래스, ID 또는 요소에 적용할 수 있습니다. 이 속성은 px, em, rem, vw, vh 값과 키워드 사용을 허용합니다.
대부분의 개발자는 웹페이지 스타일을 지정하기 위해 다양한 글꼴 크기 조합을 사용합니다. 예를 들어, 웹 개발자는 제목에 큰 글꼴을 사용하고 본문 및 기타 항목에 더 작은 글꼴을 사용할 수 있습니다. 많은 사람들이 궁금해합니다. CSS 또는 HTML에서 글꼴 크기를 변경하는 방법
CSS 글꼴 크기 ?는 개발자가 허용합니다. 웹 페이지의 단락 또는 텍스트 줄의 글꼴 크기를 설정합니다.
이 자습서에서는 예제를 참조하여
CSS 텍스트 크기 적절한 글꼴 스타일은 웹 디자인의 중요한 부분입니다. 스타일이 지정되지 않은 텍스트는 방문자에게 읽기 어려움을 야기하여 사이트에서 거의 확실히 불쾌한 경험을 하게 됩니다.
font-family, 장식 텍스트 및 색상 . 또 다른 중요한 속성은 텍스트 블록의 글꼴 크기를 제어하는 글꼴 크기입니다.
글꼴
sizeValue는 텍스트 블록에 사용할 글꼴의 크기입니다. 블록에서 사용하는 글꼴의 크기를 지정하는 방법에는 여러 가지가 있습니다. text 이 기사에서 논의할 방법은 다음과 같습니다.
웹페이지에서 글꼴 크기에 대한 각 접근 방식을 사용하는 방법의 예를 살펴보겠습니다.
픽셀을 사용하여 글꼴 크기 조정 다음 중 하나 그만큼 문자 크기를 설정하는 가장 일반적인 방법은 픽셀을 사용하는 것입니다.
픽셀은 정확한 측정 단위를 제공하기 때문에 좋은 측정 단위입니다. 픽셀 단위는 운영 체제 또는 웹 브라우저의 영향을 크게 받습니다. 한 화면의 픽셀은 다른 화면의 픽셀입니다. 지정된 픽셀 값은 다른 브라우저에서 거의 동일하게 나타납니다.
그러나 픽셀을 사용하여 텍스트 블록의 글꼴 크기를 설정하는 것은 한계가 있습니다. 접근성. 일부 브라우저에서는 사용자가 글꼴 크기를 사용자 정의할 수 없기 때문에 도움말에서 설정한 픽셀 글꼴 크기에 액세스할 수 없습니다. 예를 들어 시각 장애가 있는 사용자는 픽셀을 사용하여 문자 크기를 설정하는 사이트를 사용하기 어려울 수 있습니다.
만들면 모든
12px 요소의 글꼴 크기가 28px인 웹사이트 다음 코드를 사용하여 이를 수행할 수 있습니다.
우리 코드에서는 sets CSS 선택기를 사용하여 모든 글꼴 크기를 28px 및 모든
12px. 다음 스니펫은 이러한 요소가 새로운 글꼴 크기에서 어떻게 보이는지 보여줍니다.
>
클릭 24" <너비 "높이 = 24 "클래스 = wp-image-13930 "스타일 = 너비: 24픽셀; " src =" https://744025.smushcdn.com /1245953/wp-content/uploads/2020/03/iconfinder_play-circle-outline_326584.png?lossy=1&strip=1&webp=1 "alt =" 실행 이미지 코드" 버튼, 원 안의 삼각형 "srcset = "https://744025.smushcdn.com/1245953/wp-content/uploads/2020/03/iconfinder_play-circle-outline_326584-20x20.png?lossy=1&strip = 1 & webp = 1 20w, 24w https: // 744025 .smushcdn.com / 1245953 / wp-content / 업로드 / 2020/03 / iconfinder_play-circle-outline_326584.png? lossy = 1 & strip = 1 & webp = 1 "size =" (max - width: 24px) 100vw, 24px "> 코드를 실행하기 위한 상단 창의 오른쪽 상단 모서리
CSS에서 글꼴 크기를 설정하는 또 다른 일반적인 방법은 em 치수를 사용하는 것입니다. 측정 단위 em은 부모 글꼴 크기를 나타냅니다. définiss인 경우 글꼴 크기를 2em 입력 , 글꼴 크기는 상위 요소의 두 배입니다.
ems로 CSS 글꼴 크기 조정의 예 예를 들어 텍스트 단락이 저장되어 있다고 가정해 보겠습니다. 상자에 있습니다. 상자의 글꼴 크기는 20px입니다. 텍스트 단락 글꼴 크기를 1em으로 지정한 경우 단락 글꼴 크기는 20px . 부모 요소의 글꼴 크기와 같습니다.
부모 요소의 글꼴 크기를 설정하지 않은 경우 브라우저는 해당 브라우저에 지정된 기본값을 사용합니다. 보통 16px 이므로 글꼴 크기를 지정하지 않으면 1em def ault 16px 2em 기본 32px .
웹 페이지의 글꼴 크기가 16px. 모든 텍스트 단락이 이 글꼴 크기를 사용하여 표시되기를 원합니다. 즉, 1em 값을 사용해야 합니다. 또한 모든 헤드가 1.5em과 동일한 24px 글꼴 크기로 표시되기를 원합니다.
다음을 사용할 수 있습니다. 이를 수행하는 코드:
우리 코드에서 모든 단락의 크기는 16px(1em = 16px/ 기본값) 및 모든 24px(1.5em = 24px)입니다.
웹 페이지에서 텍스트가 다음과 같이 표시됩니다.
Nell "위의 예에서 우리의 < h1> 및
Root를 사용하여 글꼴 크기 정의 em 법원 루트 em, rem은 글꼴 크기를 설정하는 데 사용할 수 있는 CSS3에 도입된 새로운 측정 단위입니다. 값은 rem 은 상위 요소가 아니라 루트 요소 에 연결됩니다.
값은 다음을 수행할 수 있기 때문에 유용합니다. 전체 문서에 상대적인 값을 지정합니다. 이런 식으로 부모 요소에 다른 값이 있는 경우 텍스트 크기는 영향을 받지 않습니다. em
기본 글꼴 크기가 16px인 웹페이지가 있다고 가정합니다. 이전 예에서와 같이 우리는 모두 24px에 표시되고 모든 단락이 16px에 표시되기를 원합니다. 다음 코드를 사용하여 이러한 글꼴 크기를 정의할 수 있습니다.
코드는 이전 예제와 거의 동일합니다. 유일한 차이점은 사용 측정 단위가 em 대신 rem이라는 것입니다. 이 예에서 글꼴 크기는 항상 제목 및 최상위 단락에 대해 각각 24px 및 16px입니다. 기본 웹 페이지 글꼴 크기가 16px이기 때문입니다.
단어를 사용하여 글꼴 크기 설정 - 키 키에는 두 가지 유형이 있습니다. CSS에서 글꼴의 크기를 정의하는 데 사용할 수 있는 단어입니다.
절대 키워드는 웹페이지의 변경 사항에 관계없이 동일하게 유지되는 글꼴 크기를 정의하는 데 사용됩니다. 절대 글꼴 크기를 정의하는 데 사용할 수 있는 키워드는 다음과 같습니다.
xx-small (9px) X- small (10px)작은 (13px)중간 (16px) < 코드>대형(18px) x-large(24px)xx-large (32px) 괄호 안의 값은 기본 글꼴 크기가 16px인 브라우저를 기반으로 합니다.
상대 키워드 반면 , 웹 페이지의 다른 곳에서 글꼴 크기에 따라 변경되는 글꼴 크기를 정의합니다. 사용할 수 있는 상대 키워드는 가장 작은 것과 가장 큰 것입니다. 이 키워드는 페이지의 다른 글꼴 크기가 변경될 때 글꼴 크기를 변경할 수 있기 때문에 유용합니다.
페이지의 모든 >24px(x-large) 및 모든 ; 18px(large). 이 코드를 사용하여 수행할 수 있습니다.
클릭 "높이 = 24 "클래스 = wp-image-13930 "스타일 = 너비: 24px; "src =" https://744025.smushcdn.com / 1245953 / wp-content / uploads / 2020/03 / iconfinder_play-circle-outline_326584.png? lossy = 1 & band = 1 & webp = 1 "alt =" key " execution code ", 원 안의 삼각형 "srcset =" https://744025.smushcdn.com/1245953/wp-content/ uploads / 2020/03/iconfinder_play-circle-outline_326584-20x20.png?lossy= 1 & 스트립 = 1 & webp = 1 20w, https://744025.smushcdn.com/1245953/wp-content/uploads/2020/0 -원 외곽선_326584.png? 손실 = 1 & 스트립 = 1 & webp = 1 24w "크기 =". (max -width: 24px) 100vw, 24px "> 버튼 HTML / CSS의 출력을 보려면 위의 편집기 코드에서
24px 및 18px입니다. 그러나 우리는 이들을 지정하지 않았습니다. 크기는 픽셀을 사용합니다. 대신 - 브라우저에서 기본적으로 제공하는 글꼴 크기에 대한 키라는 단어를 사용했습니다.
표시 단위를 사용하여 글꼴 크기 설정 표시 단위는 다음과 같이 계산됩니다. 브라우저 창 크기의 백분율 CSS에서 지원하는 두 가지 표시 단위는 표시 높이(vh)와 표시 너비(vw)입니다.
표시 단위는 브라우저 창 크기의 백분율입니다. 예를 들어 1VH는 창 높이의 1%입니다. 따라서 1000px 창이 큰 경우 1VH는 10px입니다.
브라우저 창의 크기를 조정하면 글꼴 크기가 변경되므로 창 단위를 사용하면 유용합니다. 다양한 크기의 브라우저와 기기에 적용할 수 있는 보다 접근 가능한 사용자 환경을 제공합니다.
헤더가 창 너비의 4%인 사이트를 만들고 싶다고 가정해 보겠습니다. 그리고 그 포인트는 가시 영역 너비의 1%입니다. 다음 코드를 사용하여 수행할 수 있습니다.
위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인합니다.
브라우저 크기를 조정하면 이러한 헤더의 크기가 변경됩니다.
결론 글꼴 크기 속성은 CSS(따라서 HTML)에서 글꼴 크기를 수정하는 데 사용됩니다. 픽셀, em, rems, 키워드 및 표시 단위를 포함하여 글꼴의 크기를 볼 수 있는 여러 측정 단위를 허용합니다. CSS 및 ID 뿐만 아니라 요소 자체에도 적용할 수 있습니다.
이 튜토리얼에서는 CSS 글꼴 크기의 기본입니다. 이제 전문가처럼 글꼴 크기 속성을 사용할 준비가 되었습니다.
Shop
Learn programming in R: courses
$
Best Python online courses for 2022
$
Best laptop for Fortnite
$
Best laptop for Excel
$
Best laptop for Solidworks
$
Best laptop for Roblox
$
Best computer for crypto mining
$
Best laptop for Sims 4
$
Latest questions
NUMPY NUMPY
psycopg2: insert multiple rows with one query
12 answers
NUMPY NUMPY
How to convert Nonetype to int or string?
12 answers
NUMPY NUMPY
How to specify multiple return types using type-hints
12 answers
NUMPY NUMPY
Javascript Error: IPython is not defined in JupyterLab
12 answers
Wiki
Python OpenCV | cv2.putText () method
numpy.arctan2 () in Python
Python | os.path.realpath () method
Python OpenCV | cv2.circle () method
Python OpenCV cv2.cvtColor () method
Python - Move item to the end of the list
time.perf_counter () function in Python
Check if one list is a subset of another in Python
Python os.path.join () method
위의 코드 편집기에서 버튼을 눌러 HTML/CSS 코드의 출력을 확인합니다.