> 소프트웨어 튜토리얼 > 사무용 소프트웨어 > CSS에서 고정 폭 글꼴을 설정하는 방법

CSS에서 고정 폭 글꼴을 설정하는 방법

王林
풀어 주다: 2024-01-20 08:39:11
앞으로
1300명이 탐색했습니다.

CSS에서 고정 폭 글꼴을 설정하는 방법

CSS에서 텍스트 너비를 동일하게 설정하는 방법

td:이후 {

내용: ':';

위치: 절대;

}

td {

글꼴 크기: 14px;

너비: 4em;

text-align-last: 양쪽 정렬;

}

사용자 이름
비밀번호 설정
비밀번호 확인
휴대전화
이메일
인증코드

CSS에서 px와 em rem 단위의 차이점을 완전히 이해하세요

픽셀은 픽셀(Pixel)

em은 현재 요소가 사용하는 글꼴의 대문자 영문자 M의 너비를 지정하는 이유는 비례 글꼴에서는 각 글자의 너비가 동일하지 않기 때문입니다(예: W와 i의 너비). 매우 다릅니다) , 고정 너비 글꼴(예: 한자)에서는 각 문자의 너비가 동일하므로 em은 문자 너비(또는 한자 너비의 절반)입니다

rem은 페이지 루트 요소의 글꼴 너비입니다(r은 루트). 다른 설명은 위와 동일합니다

px는 절대 길이 단위입니다. 즉, 요소의 너비가 100px로 지정되면 너비는 100픽셀로 고정되는 반면 em은 요소의 너비와 같은 상대적 길이 단위입니다. 4em이고 이 요소의 너비는 다음과 같습니다. 글꼴 너비가 12px인 경우 이 요소의 실제 너비는 48px입니다. 이 요소의 글꼴 크기를 16px로 변경하면 이 요소의 실제 너비는 자동으로 64px가 됩니다. rem의 경우, 이 페이지에서 rem을 사용하도록 허용하는 것입니다. 길이 단위의 요소는 페이지의 루트 요소(보통 html 또는 body)의 글꼴 크기에 따라 자동으로 조정될 수 있습니다. 전체 페이지의 모양을 변경하려면 루트 요소의 글꼴 크기를 변경해야 합니다. 이는 일반적으로 반응형 페이지 레이아웃에 사용됩니다.

CSS의 텍스트 설정!

질문 1: .left a{}를 사용한다면 다음에 무엇을 할 것인가요

직장에서 수업을 이용하지 마세요

work로 변경하세요. 3문단의 텍스트를 별도로 정의하려면 클래스를 사용하세요. 하지만 작성 방법은 .left a{}가 아니라 .work a{}도 됩니다. work를 한 번만 사용하는 경우에는 .work a{}를 선택하세요. 다른 곳에서 사용하고 싶다면 글꼴 등의 설정을 다르게 하고 싶다면 .left work a{}를 사용하세요.

질문 2: 오른쪽 하단에서 p 태그 또는 a 태그를 정의할 수 있습니다. 패딩은 내부 거리를 정의하지 마세요.

헤더입니다!

.header p{margin-top: 레이어 높이-10px float:right;}

헤더입니다!

.header a{margin-top: 레이어 높이-10px float:right;}

html에서 문자 글꼴의 너비를 제어하는 ​​방법

단순히 너비를 변경해야 하는 경우 기존 CSS 속성을 구현할 수 없습니다. CSS3의 변형 기능을 사용하여 구현할 수 있지만 이는 글꼴뿐만 아니라 레이블에 대한 전반적인 변경입니다(글꼴의 변형으로 인해). 외부 라벨, 내부 요소가 함께 변경되어 국가를 구한다고 볼 수 있습니다. 예:

.change { width: 200px; 변환: scaleX(1.2) }

전체 div 너비가 1.2배로 확대됩니다

HTML에서는 CSS의 Font-size를 사용하여 글꼴 크기를 제어할 수 있지만(글꼴 너비는 글꼴 크기에 따라 변경됩니다), 높이에 관계없이 글꼴 너비만 변경할 수 있는 속성은 없습니다.

단어 간격을 사용하여 텍스트와 텍스트 사이의 간격을 제어할 수 있습니다🎜

위 내용은 CSS에서 고정 폭 글꼴을 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:docexcel.net
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿