CSS 글꼴 연결 방법 : 명령어

컴퓨터

당신이 디자이너 또는 웹 마스터라면 오히려결국 CSS 글꼴을 연결하는 방법을 알게되었습니다. 당신이 작은 블로그의 소유자이고 귀하의 자원을 꾸미고 그것을 독특하게하기로 결정했다면,이 지식은 당신을 도울 것입니다. 그러나 계단식 스타일 시트가 무엇인지, 글꼴을 가져올 위치와 글꼴을 설치하는 위치를 이해하려면 맨 처음부터 시작하는 것이 좋습니다.

설명

그래서 CSS 글꼴을 연결하는 방법에 대한 대답은사이트는 공식 언어 자체에 대한 설명으로 시작해야합니다. CSS는 계단식 스타일 시트입니다. 이 언어는 문서의 모양을 설명하는 데 사용됩니다. 마크 업 언어와 함께 작동합니다.

CSS는 인터넷에서 페이지의 시각적 기능을 지적하기 위해 노력하고 있습니다. 후자는 특별한 HTML 또는 XHTML 마크 업 언어에 기초하여 작성되어야합니다.

사용

누가 CSS가 필요합니까? 글꼴을 연결하고, 색상을 설정하고, 블록을 배치하고, 웹 마스터, 사이트 제작에 참여하는 프로그래머를 필요로합니다. 계단식 스타일 시트의 주요 작업은 시각적으로 구조화를 분리하는 것입니다. 즉, HTML이 견고한 텍스트 블록을 구성하면 CSS는 조건부로이 블록을 "장식"하고, 요소를 선택하고, 매개 변수를 할당하는 데 도움을줍니다.

분리는 문서에 접근성, 유연성 및 제어력을 제공합니다. 그것은 당신이 콘텐츠의 복잡하고 반복 가능한 요소를 제거 할 수 있습니다.

연결성

연결 방법을 알아 내기 전에CSS의 글꼴을 사용하려면 CSS와 CSS 스타일 시트를 동기화하는 방법을 알아야합니다. 그들의 규칙은 동일한 언어로 구현됩니다. 스타일 시트 자체가 사용하는 CSS 규칙을 획득했습니다. 테이블은 시각적으로 편집 가능한 문서 또는 .css 확장자를 가진 별도의 파일에있을 수 있습니다. 그러한 파일에는 일반적으로 명령과 마크 만 있습니다.

따라서 스타일 시트가 여러 가지 방법으로 연결될 수 있다는 것이 명확 해집니다. 그들을 더 고려하십시오.

방법

도움이되는 네 가지 옵션이 있습니다.CSS 글꼴을 연결하고, 색조를 지정하고, 블록을 정의하는 등의 작업을 할 수 있습니다. 앞에서 언급했듯이 일련의 규칙은 HTML로 작성된 파일에있을 수 있습니다. 그러나이 옵션은 많은 디자이너를 좋아하지 않습니다. 이것은 명령의 전체적인 캔버스에서 설명적인 매개 변수를 찾아서 모두 수행하는 것이 어렵다는 사실 때문에 발생합니다. 별도의 문서에 스타일을 지정하는 것이 훨씬 쉽습니다.

CSS가 별도로있는 경우 <link> 태그를 통해 연결됩니다. <head>와 </ head> 안에 있어야합니다. 이 마크에서 href 속성을 지정해야합니다. href 속성은 CSS를 사용하여 파일에 주소를 표시합니다.

명령이 별도의 파일에 의해 다시 수집되면,@import 지시어를 통해 웹 문서에 연결합니다. <style>과 </ style> 기호 사이에 써야합니다. <style> 바로 뒤에 지시어를 넣고 괄호 안에 URL 뒤에 CSS가있는 파일에 대한 링크를 나타냅니다. 두 경우 모두 규칙이 전체 문서에 적용됩니다.

다음 두 가지 방법은 상황과 관련이 있습니다.CSS가 장식 될 문서에 직접 배치 될 때. 이 경우 스타일 시트는 <style>과 </ style> 표시 사이에있을 수 있습니다. 네 번째 방법은 스타일 속성을 통해 태그 중 하나를 기준으로 규칙을 배치하는 것입니다. 그런 다음 규칙은 특정 텍스트의 경계 내에있는 별도의 매개 변수에 영향을줍니다.

첫 번째 두 가지 방법은 외부 스타일 시트의 모양을 표시하고 두 번째 방법은 외부 스타일 시트의 모양을 표시합니다.

글꼴

사용 된 글꼴은 무엇입니까? 물론 모든 사이트 소유자는 자신의 리소스가 아름답고 독창적 이길 원합니다. 나는 모두 중에서 눈에 띄는 특수 요소의 페이지에 배치하고 싶습니다. 또한 종종 표제 나 비표준 글을주의해야합니다.

이에 대해 많은 의문점이 있습니다. 아마도 웹 마스터는 "Photoshop"에서 그린 그림을 사용했을 것입니다. 아마도이 옵션은 Flash에서 가져온 것일 수 있습니다. Javascript를 사용하는 옵션이 있습니다. 그러나 연습이 보여주는 것처럼 첫 번째 옵션은 불편하고 느리고 두 번째 옵션은 시대에 뒤 떨어지고 세 번째 옵션은 너무 혼란 스럽습니다. 새롭고 아름다운 것을 만들려면 CSS 글꼴을 연결해보십시오.

속성

우리의 경우 글꼴은특정 스타일뿐만 아니라 텍스트의 모양을 제어하는 데 필요한 다수의 속성 집합입니다. 몇 가지 옵션을 사용할 수 있습니다. 제목, 단락, 인용문, 본문 텍스트, 메뉴 등에 대한 특정 글꼴을 지정하십시오.

사용자가 거대한 공간에 액세스 할 수 있다는 사실에도 불구하고스타일, 크기, 채도 등이 다양하므로 가독성을 잊지 않는 것이 중요합니다. 서로 다른 스타일의 큰 더미를 피하는 것이 좋습니다. 페이지에 두 개의 글꼴이 충분합니다.

가족

스타일을 선택할 수 있습니다.글꼴을 사용하려면 font-family 패밀리를 사용하십시오. 독자의 PC에 특정 글꼴이 있는지 여부를 명확하게 이해하는 것은 매우 어렵습니다. 동일한 유형의 옵션을 모두 입력하는 것이 좋습니다. 이 경우 브라우저는 사용자 시스템에있는 브라우저를 선택합니다.

이 가족은 여러 가지 의미가 있습니다. 예를 들어, family-name은 폰트 패밀리의 이름으로 표현됩니다. 제네릭 패밀리 값은 상위 5 개 주요 글꼴 패밀리를 정의합니다.

글꼴 스타일 패밀리는 서체 선택에 대한 책임이 있습니다. 이 스타일은 이전 스타일과 같이 상속됩니다. 값 중에는 보통 또는 기울기 및 이탤릭체가 있습니다. 글꼴 변형 스타일은 작은 대문자를 담당합니다. 채도의 경우 font-weight 등을 사용합니다. 글꼴에 크기와 색상을 지정할 수 있습니다.

비표준 솔루션

표준 글꼴 외에도 다음을 사용할 수 있습니다.비표준 솔루션. 일반적으로 그들은 더 독특하며, 경쟁 업체의 사이트에서이를 눈치 채지 못할 것입니다. 이렇게하려면 사진, 자바 스크립트 및 플래시를 사용할 필요가 없습니다. @ font-face 규칙을 따르는 것으로 충분합니다. 사용자가 외부 파일을 문서에로드 할 수 있습니다.

이 방법을 사용하면 글꼴 CSSOTF 및 TTF. 이것들은 비슷한 작업을 잘하는 특별한 형식입니다. Internet Explorer에서만 문제가 발생할 수 있습니다. 1997 년 써드 파티 글꼴을 처음 사용하기 시작 했음에도 불구하고 그는 이제 엄격한 요구 사항을 제시합니다.

그는 당신의 직업을 망치기 위해 많은 일을합니다. 종종 글꼴 파일을 압축 할 수 있으며 때로는 암호화 할 수도 있습니다. 따라서 모든 종류의 해킹이 있습니다.

형식

이제 몇 가지 글꼴 형식이 있습니다.알 필요가있어. 그렇지 않으면 많은 불일치와 비 호환성이 발생합니다. CSS TTF 글꼴을 연결할 수 있습니다. 이 형식은 이제 모든 웹 브라우저에서 지원됩니다. Internet Explorer 버전 8 이하와 Opera Mini 5.0-8.0은 예외 일 수 있습니다.

EOT 만 EOT로 작업 할 수 있습니다. WOFF의 상황은 TTF와 동일합니다. 그러나 SVG는 Safari, iOS Safari, Android Browser뿐만 아니라 Chrome 브라우저 버전 37까지 운영됩니다. 실습에서 알 수 있듯이 TTF를 사용하는 것이 가장 좋습니다. 이것은 거의 문제를 일으키지 않는 가장 다양한 옵션입니다. 그는 가장 흔한 사람입니다.

규칙

그래서, 하나의 글꼴을 연결하려면위의 형식을 사용하면 @ font-face 규칙을 사용하는 것으로 충분합니다. 명확하게하려면 특정 알고리즘을 따라야합니다. font.ttf 글꼴 파일이 있습니다. 주 텍스트로 사용하려면 먼저 모든 사이트 파일이있는 폴더에서 파일 자체를 복사해야합니다.

둘 이상의 글꼴을 사용하려면 업로드 할 특수 폴더를 만들 수 있습니다. 따라서 폴더를 찾고 해당 폴더의 내용을 변경하는 것이 훨씬 쉬울 것입니다.

이제 브라우저가 자체적으로 글꼴을 다운로드하도록해야합니다. 이를 위해 당신은 그에게 징후를 줄 필요가 있습니다. @ font-face 지시어를 사용하십시오. 팀은 다음과 같이 보입니다.

@ font-face {

font-family : MyUniqueFont;

src : url ( "fonts / font.ttf");

}

글꼴 - 패밀리 팀은 글꼴그의 이름이 붙은 후 글쓰기 스타일로 사용할 수 있습니다. 두 번째 줄에는 브라우저가 스타일을 찾아서 연결해야하는 방법이 나와 있습니다. 이것은 보편적 인 주소가 아닙니다. 글꼴 파일을 넣는 위치에 따라이 경로도 달라집니다. 따라서 폴더에서 CSS 글꼴을 연결하는 방법을 배우게됩니다.

연결

여러 연결 방법을 모르는 경우CSS 폰트에 대한 지침도 있습니다. 한 번에 여러 개의 파일을 지정할 수 있습니다. 예를 들어, 그들은 12 개가 될 수 있습니다. 이 경우 @ font-face 위의 규칙을 사용해야합니다. 이전에 폴더에서 한 파일을 어떻게 연결했는지와 같은 방법으로 새 줄을 추가 한 예에 따라 다른 글꼴 옵션에 대한 링크를 지정하십시오.

당신의 위치가 WordPress에 건축되는 경우에,스타일을 훨씬 쉽게 연결할 수 있습니다. 머리글 스타일을 바꾸려면 관리자 패널로 들어가기 만하면됩니다. "테마 설정"을 검색하십시오. "타이포 그라피"섹션에는 다양한 옵션 목록이 있습니다. 변경 사항을 선택하고 저장하면됩니다.

기타 옵션

매우 자주 글꼴을 연결하는 데 사용Google 글꼴 서비스. 이것은 스타일을 선택하고 연결하기위한 인기있는 도구입니다. 거대한 수의 글꼴 집합이 있습니다. 연결하려면 공식 웹 사이트로 이동하십시오.

예제와 함께 목록이 표시됩니다.실험 할 기회. 원하는 스타일을 추가 한 후 자원이 러시아어 인 경우 키릴 문자를 선택하는 것을 잊지 마십시오. 그런 다음 크기, 스타일을 선택하거나 모든 경우에 대해 여러 옵션을 즉시 선택할 수 있습니다.

필요한 코드를 준비한 후CSS 파일로 설정합니다. 이 경우 add 메소드의 규칙도 적용됩니다. 예를 들어, 스타일 시트가 별도의 문서로 표현되는 경우 명령은 첫 번째 행으로 전송됩니다. 스타일 시트가 HTML 파일에 직접있는 경우 <style> 및 </ style> 태그의 본문에 추가하십시오.

결론

귀하의 사이트에 새로운 글꼴을 쉽게 추가 할 수 있습니다. 방법과 옵션으로 즉시 결정하는 것이 중요합니다. 사이트의 시스템에 따라 이러한 작업을 고려해야합니다. 필기 리소스가있는 경우이 경우 몇 가지 옵션이 있습니다. 예를 들어 WordPress와 같은 경우이 작업은 생각보다 훨씬 쉽습니다.