CSS3--텍스트에 글꼴 및 색상 스타일을 추가하는 방법

이 장에서는 웹 페이지의 텍스트를 더 아름답게 만들 수 있습니다.

텍스트의 일부 속성에 대하여

• font-family: 텍스트 글꼴

• font-size: 텍스트 크기

• color: 텍스트 색상

• font-weight: 텍스트 두께

• text-꾸밈: 더 많은 텍스트 스타일

font-family(글꼴 계열)

총 5개 계열이 있습니다: sans-serif(sans serif) ), serif(serif), monospace(monospaced), cursive(cursive...이것이 원래 의도입니다), Fantasy(fantasy?) CSS 글꼴 패밀리에서 오른쪽 그림을 참조하세요

작동 방식

body {
	font-family: Verdana, Geneva, Arial, sans-serif;
}

고객의 컴퓨터에서 Verdana를 찾습니다. 그렇다면 Verdana를 사용하여 텍스트를 표시합니다. 그렇지 않은 경우에는 Arial을 찾습니다. 기계에 있는 산세리프 글꼴(일반적으로 모든 컴퓨터에는 산세리프 글꼴이 있습니다. 참고: 산세리프는 특정 글꼴이 아닙니다.)

글꼴 이름에 공백이 있으면 해당 글꼴을 넣을 수 있습니다. 이름은 다음과 같습니다. Font-family: "Courier New", Courier;

사용자가 내가 지정한 글꼴을 사용할 수 있기를 원하지만 사용자가 이 글꼴을 가지고 있는지 알 수 없는 경우

Web 글꼴이 여기에 있습니다!

사용 방법

1. 글꼴 파일 찾기: 접미사 이름은 woff, svg, eot, otf, ttf

2. 이 글꼴을 웹에 올리면 Google의 글꼴 호스팅 서비스를 사용할 수 있습니다. 무료입니다

3. CSS에 @font-face 속성을 추가하세요

   @font-face {
   	font-family:"Emblema One";
   	src:url("www.某网站.com");
   }/*那个网址就是字体URL */

   이번에는 사용자 컴퓨터에서 Emblema One이라는 글꼴을 만드는 것과 같습니다

4. 로컬 글꼴처럼 사용하세요. 사용 위치에 주의하세요. @font-family

이 글꼴의 단점은 글꼴을 로드하는 데 시간이 오래 걸린다는 것입니다. 따라서 고객이 처음 웹사이트를 방문하고 이 글꼴이 없으면 한 시간이 걸립니다. 글꼴을 조정하는 동안

크기에는 세 가지 글꼴 단위가 있습니다

: px(픽셀), %, em(배수, em=%를 100으로 나눈 값)

h1 {
	font-size:220%;
}

하는 방법도 있습니다. 글꼴 크기 지정 - 키워드(xx-소형, x -소형, 소형, 중형, 대형, x-대형, xx-대형)

각 키워드가 나타내는 크기는 확실하지 않습니다. client

그럼 어떻게 해야 할까요?

우선 키워드를 통해 의 텍스트 크기를 정의할 수 있습니다.

그 후에 백분율이나 em을 사용하여

글꼴 크기를 표현하기 위해 px 픽셀을 사용하는 것은 권장되지 않습니다. 이 방법을 사용하면 텍스트 크기를 정확하게 확인할 수 있지만 이전 버전의 IE 브라우저에서는 크기 조정이 지원되지 않습니다.

글꼴 변경 Thickness

키워드 크기에는 5가지가 있습니다. 즉, Bold(굵게), Bolder(더 두껍게), 상속(이전 수준의 두께 상속), Lighter(얇게), Normal(보통)

글꼴 두께를 100에서 900(100의 배수) 사이의 숫자로 설정하는 방법도 있습니다.

글꼴에 스타일을 추가하세요

4가지 유형이 있습니다: 상속(아빠로부터 상속됨), 기울임꼴 (italic), Normal (normal), oblique (oblique)

italic과 oblique의 차이점 차이점은 전자는 이 글꼴의 italic을 사용하고 표시 방법은 글꼴 파일에 있는 반면 후자는 직접적으로 이탤릭체는 올바른 단어입니다. . . 그런데 거의 똑같은 것 같아요

颜色

Demo设置的颜色

body {
	background-color:red;
	background-color:rgb(80%, 40%, 0%);
	background-color:rgb(204, 102, 0);
	background-color:#66ccff;
}

这是四种设置颜色的方法，第一种是关键字，这个一般是小学生在用的吧，支持的颜色不多

第二种是使用rgb（red、green、blue）百分比，那些百分比意思是依次是红/绿/蓝的量（怎么说呢，越大就越含有这个颜色）

第三种和第二种相似，只不过从0%~100%改成了0~255

最后一种是十六进制码，意思是：

前两个代表红的十六进制、中间两个是绿的、最后两个是蓝的

把十六进制转成10机制就变成了第三种设置颜色的方法了

对于文本和背景，要使用对比度比较大的颜色，这样可读性才好

文本装饰（text-decoration）

    不多说，直接看效果：blink inherit line-through none overline underline

BULLET POINTS

• CSS는 글꼴 모음, 글꼴 두께, 글꼴 크기, 글꼴 스타일 등을 포함하여 글꼴 모양을 제어하는 ​​많은 속성을 제공합니다.

• font-family는 사람들의 그룹입니다. 공통적인 특징을 지닌 웹용

• 의 글꼴군에는 serif, sans-serif, monospace, cursive, Fantasy가 있습니다. serif와 sans-serif가 가장 일반적으로 사용됩니다.

• 방문자가 웹 페이지에서 보는 글꼴은 글꼴 패밀리 CSS 속성에서 웹 글꼴

• 을 사용하지 않는 한 방문자의 컴퓨터에 설치된 글꼴에 따라 다릅니다. 사용자가 선호하는 글꼴이 설치되어 있지 않은 경우를 대비해 후보 글꼴을 지정하는 것이 좋습니다.

• 마지막 글꼴은 serif 또는 sans-serif와 같은 일반 글꼴이어야 합니다. 그러면 다른 글꼴을 찾을 수 없는 경우 찾아보기 도구는 적절한 글꼴을 대체할 수 있습니다.

• 특정 글꼴을 사용하고 싶지만 사용자가 기본적으로 이 글꼴을 설치하지 않은 경우 @font-face 규칙을 사용할 수 있습니다.

• 글꼴 크기는 다음과 같습니다. 일반적으로 키워드는 픽셀 px, 백분율, em 사양입니다

• 픽셀을 사용하여 글꼴 크기를 지정하는 경우 문자 높이가 몇 픽셀인지

• em과 %는 상대적인 글꼴 크기이므로 브라우저에 알려주는 것입니다. em과 %를 사용하여 글꼴 크기를 지정합니다. 즉, 글꼴 크기는 상위 요소의 글꼴 크기를 기준으로 결정되어야 합니다.

• 상대 글꼴 크기를 사용하면 페이지를 더 쉽게 관리할 수 있습니다.

• 글꼴 크기 사용 기본 글꼴 크기를 설정하는 본문 규칙의 키워드를 사용하면 사용자가 텍스트를 더 크거나 작게 원하는 경우 모든 브라우저에서 글꼴 크기를 비례적으로 조정할 수 있습니다.

• 글꼴 가중치 CSS 속성을 사용하여 텍스트를 만들 수 있습니다. 굵게

• 글꼴 스타일 속성을 사용하여 기울임꼴 또는 기울임꼴 텍스트를 만드는 데 사용됩니다. 이탤릭체 또는 이탤릭체 텍스트가 기울어져 있습니다

• 웹 색상은 빨간색, 녹색, 파란색을 서로 다른 양으로 혼합하여 얻은 것입니다

• 빨간색 100%, 녹색 100%, 파란색 100%를 혼합하면 흰색이 됩니다. , All 0% is black

• CSS에는 16가지 기본 색상과 150가지 이상의 확장 색상이 있습니다

• 빨간색, 녹색, 파란색 백분율을 사용하여 원하는 색상을 지정하거나 숫자를 사용할 수 있습니다 값(0~255) 또는 16진수 코드

• 원하는 색상의 16진수 코드를 찾으려면 사진 편집 애플리케이션의 색상 선택 도구를 사용할 수 있습니다

• 색상을 나타내는 16진수 코드에는 6자리, 각 비트는 0~F를 나타내며 처음 두 개는 빨간색, 중간 두 개는 녹색, 마지막 두 개는 파란색을 나타냅니다. 밑줄 친 문서는 사용자가 링크 텍스트로 오해하는 경우가 많으므로 이 속성을 주의해서 사용하세요

위 내용은 CSS3--텍스트에 글꼴 및 색상 스타일을 추가하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!