CSS에 외부 글꼴을 도입하는 방법은 무엇입니까? CSS 글꼴 스타일 설정 방법(예)-CSS 튜토리얼-php.cn

CSS에 외부 글꼴을 도입하는 방법은 무엇입니까? CSS 글꼴 스타일 설정 방법(예)

青灯夜游

풀어 주다： 2018-09-14 13:56:09

원래의

20064명이 탐색했습니다.

브라우저 표시에서 페이지의 다양한 글꼴 스타일은 페이지의 아름다움을 향상시킬 뿐만 아니라 사용자의 탐색 상호 작용도 향상시킵니다. 그렇다면 CSS를 사용하여 이러한 다양한 글꼴 스타일을 어떻게 설정합니까? 이 장에서는 CSS에 외부 글꼴을 도입하는 방법을 보여줍니다. CSS 글꼴 스타일 설정 방법(예시) . 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

1. Font-Family 속성의 기능과 용도는 무엇인가요?

1.font-family 속성의 역할

font-family 속성을 사용하면 CSS 코드를 사용하여 다음과 같은 페이지의 텍스트 표시에 대한 글꼴 스타일을 설정할 수 있습니다. 등. 글꼴 모음 속성은 페이지가 더욱 조화롭고 아름답게 표시되도록 다양한 글꼴을 설정합니다.

font-family 속성은 쉼표로 구분된 여러 값(글꼴)을 정의할 수 있습니다. 브라우저가 첫 번째 글꼴을 지원하지 않으면 인식될 때까지 다음 글꼴을 시도합니다. 브라우저는 인식한 첫 번째 값을 사용합니다.

2. 글꼴 계열 속성 사용

font-family:"设置字体名称";

로그인 후 복사

예:

css 코드:

.demo{ font-family:"微软雅黑";}

로그인 후 복사

html 코드:

<div class="demo">我是一段测试文字</div>

로그인 후 복사

이렇게 하면 데모 상자의 모든 텍스트가 Microsoft Yahei 글꼴 스타일로 표시됩니다.

2. CSS에 외부 글꼴을 도입하는 방법은 무엇입니까?

일반 브라우저에서 일반적으로 사용되는 글꼴에는 Song Dynamise, Heilongjiang, Microsoft Yahei 등이 있습니다. 웹 페이지가 로드되고 글꼴이 선택되면 방문자의 시스템 텍스트 라이브러리의 텍스트 글꼴이 호출되기 때문에 글꼴을 찾을 수 없으면 기본 웹 글꼴이 표시됩니다. 모든 사람이 설치하는 운영 체제에는 기본적으로 이러한 글꼴이 있으므로 이러한 글꼴을 안전한 글꼴이라고도 합니다. 그러나 특별한 요구 사항이 있는 경우 일부 외부 글꼴을 참조하여 개인화되고 보기 좋은 텍스트 스타일을 표시할 수 있습니다.

CSS에 외부 글꼴(@font-face)을 도입하는 방법:

1. @font-face 태그 소개

@font-face를 사용하면 컴퓨터에 설치되지 않은 글꼴을 사용할 수 있습니다. 웹 페이지에서 안전한 글꼴 제한을 완전히 제거합니다. 서버에 글꼴 패키지를 설치하기만 하면 사용자가 웹 페이지를 로드할 때 글꼴 패키지가 사용자의 컴퓨터에 자동으로 다운로드되어 글꼴이 올바르게 렌더링될 수 있습니다.

2. CSS에 외부 글꼴을 도입하는 단계

1) CSS에 글꼴을 도입하고 외부 글꼴의 이름을 사용자 정의합니다.

@font-face {
    /* font-properties */
    font-family: 用户自定义的字体名称;
    src:url(&#39;加载外部字体文件的文件地址&#39;),  
    url(&#39;加载外部字体文件的文件地址&#39;),
    url(&#39;加载外部字体文件的文件地址&#39;); /* IE9 */
}

로그인 후 복사

font-family는 글꼴 이름을 정의하고 다음 src는 위치입니다. 글꼴 파일이 로드되는 위치에 URL이 여러 개 있는 이유는 브라우저 호환성 문제 때문입니다.

2) 방금 정의한 글꼴을 사용하세요

div {
    font-family: 用户自定义的字体名称;
}

로그인 후 복사

코드 예:

@font-face {
	 font-family: &#39;YaHei Consolas Hybrid&#39;;
	src: url(&#39;../fonts/yaheiconsolashybrid.ttf&#39;);
}

body {
	font-family: &#39;YaHei Consolas Hybrid&#39;;
	font-size: 16px;
}

로그인 후 복사

다른 브라우저의 글꼴 형식이 다르다는 점을 고려하세요(호환되는 브라우저)

/*字体后缀和浏览器有关，如下所示
* .TTF或.OTF，适用于Firefox 3.5、Safari、Opera 
* .EOT，适用于Internet Explorer 4.0+ 
* .SVG，适用于Chrome、IPhone 
*/
@font-face {
    font-family: &#39;HansHandItalic&#39;;
    src: url(&#39;fonts/hanshand-webfont.eot&#39;);
    src: url(&#39;fonts/hanshand-webfont.eot?#iefix&#39;) format(&#39;embedded-opentype&#39;),
         url(&#39;fonts/hanshand-webfont.woff&#39;) format(&#39;woff&#39;),
         url(&#39;fonts/hanshand-webfont.ttf&#39;) format(&#39;truetype&#39;),
         url(&#39;fonts/hanshand-webfont.svg#webfont34M5alKg&#39;) format(&#39;svg&#39;);
    font-weight: normal;
    font-style: normal;
}

로그인 후 복사

3.CSS는 외부 글꼴을 도입합니다. :

@font-face의 지속적인 인기로 인해 웹 글꼴이라는 새로운 글꼴 형식 아이콘 세트가 많이 제작되었습니다. 이 웹 글꼴은 일반 안전 글꼴에 비해 다음과 같은 장점이 있습니다.

1) 그림 대신 실제 텍스트를 사용합니다. 확대 및 축소는 렌더링 효과에 영향을 주지 않으며

2) 사용할 수 있습니다. 검색엔진에 의한 인식

3) 매번 다시 생성해야 하는 사진과 달리 추가, 삭제가 더 편리합니다.

위 내용은 CSS에 외부 글꼴을 도입하는 방법은 무엇입니까? CSS 글꼴 스타일 설정 방법(예)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!