-
[CODECADEMY] CSS Typography : 대체글꼴, 글씨체 link 연결( google글씨체 적용, 글씨체 불러오기, 다운받은 글씨체 적용)CSS 2020. 6. 23. 10:23
세리프와 산세 리프
Serif (세리프) — 각 문자 끝에 추가 세부 사항이있는 글꼴입니다.
예를 들어 Times New Roman 또는 Georgia와 같은 글꼴이 있습니다.
Sans-Serif — 각 문자 끝에 추가 세부 정보가없는 글꼴입니다.대신 글자는 Arial 또는 Helvetica와 같이 똑 바르고 평평한 가장자리를 갖습니다.
1. Fallback Fonts (대체 글꼴)
타일 시트에 사용자 컴퓨터에 설치되지 않은 글꼴이 필요한 경우 어떻게됩니까?
대부분의 컴퓨터에는 작은 서체 세트가 사전 설치되어 있습니다.
이 작은 세트에는 Times New Roman과 같은 serif 글꼴과 Arial과 같은 sans-serif 글꼴이 포함됩니다.
이러한 사전 설치된 글꼴 은 스타일 시트가 사용자 컴퓨터에 설치되지 않은 글꼴을 지정하는 경우대체 글꼴 로 사용됩니다.
h1 { font-family : "Garamond" , "Times" , serif ; }
위의 CSS 규칙은 다음과 같이 말합니다.
<h1>웹 페이지의 모든 요소에 Garamond 글꼴을 사용 하십시오.
Garamond를 사용할 수 없으면 Times 글꼴을 사용하십시오.
Garamond 및 Times를 사용할 수없는 경우 사용자 컴퓨터에 사전 설치된 serif 글꼴을 사용하십시오.
Garamond 다음에 지정된 글꼴은 대체 글꼴 ( Times, serif )입니다.대체 글꼴은 사이트를 방문하는 다양한 사용자에게 일관된 환경을 보장합니다.
2. Linking Fonts (연결 글꼴)
- html <link> tag 이용
최신 타이포그래피에서 사용할 수있는 글꼴 수가 많기 때문에
사용자가 컴퓨터에 모든 글꼴을 설치해야하는 것은 비현실적입니다.
새로운 글꼴은 종종 공개적으로 사용 가능한 디렉토리에 집중되어 있습니다.
이러한 글꼴은 비 사용자 글꼴이라고 합니다. non-user fonts.
Google Fonts 는 수천 개의 오픈 소스 글꼴 중 하나이며 무료로 사용할 수 있습니다.
Google 글꼴을 사용하면 font-weight및 font-style속성 을 사용하여
단일 글꼴, 여러 글꼴 또는 여러 글꼴에 대한 링크를 검색 할 수 있습니다.
Google Fonts
Making the web more beautiful, fast, and open through great typography
fonts.google.com
선택한 글꼴에 대한 링크가 있으면 태그 및 <link>, href을
사용하여 HTML 문서의 <head> 섹션에 글꼴을 추가 할 수 있습니다 .
몇 가지 예를 살펴 보겠습니다.
1. Droid Seri f예제로 사용 되는 단일 링크 글꼴
<head> <link href="https://fonts.googleapis.com/css?family=Droid+Serif" type="text/css" rel="stylesheet"> </head>2. Droid Serif및 Playfair Display글꼴을 예로 사용하여 여러 개의 연결된 글꼴 :
<head> <link href="https://fonts.googleapis.com/css?family=Droid+Serif|Playfair+Display" type="text/css" rel="stylesheet"> </head>3. 가중치 및 스타일과 함께 여러 개의 연결된 글꼴.
다음 Droid Serif의 400, 700그리고 700i 글꼴 무게를 가지고
Playfair Display의 글꼴 무게가 400, 700 900i: 일때,
<head> <link href="https://fonts.googleapis.com/css?family=Droid+Serif:400,700,700i|Playfair+Display:400,700,900i" rel="stylesheet"> </head>글꼴이 연결되면 다른 글꼴과 마찬가지로 CSS 선택기를 만들어 요소를 대상으로 지정할 수 있습니다.
적용방법 :
HTML에 구글 글꼴 EMBEDED 화면에 있는 link 추가하고
css 해당 적용하는 부분에 css주소 추가하면 끝^^
3. Font-Face
- html link 주소로 들어가서 css 규칙 적용
<link>HTML 문서에서 태그를 사용할 필요가없는 비 사용자 글꼴을 연결하는 다른 방법이 있습니다.
CSS는 @font-face속성을 사용하여 글꼴을 스타일 시트로 직접 가져올 수있는 방법을 제공 합니다.
@font-face속성을 사용하여 글꼴을 로드하려면
1. HTML 문서에서 글꼴의 링크를 사용하는 대신 브라우저의 URL 표시 줄에 링크를 입력하십시오.
( https://fonts.googleapis.com/css?family=Space+Mono:400,700%22%20rel=%22stylesheet )
2. 브라우저가 CSS 규칙을로드합니다. /* latin */로 직접 레이블이 지정된 규칙에 중점을 두어야합니다.
라틴 규칙 중 일부는 별도의 줄에 있습니다. 각각이 필요합니다.
3. latin로 표시된 각 CSS 규칙을 복사하고 브라우저에서 규칙을 style.css 의 맨 위에 붙여 넣습니다 .
@font-face글꼴을 프로젝트에 올바르게로드 하려면
규칙을 스타일 시트 맨 위에 복사해야한다는 점을 강조하는 것이 중요합니다 .
4. 글꼴이 다운로드 된 파일 주소 가져와서 적용
Google 글꼴 및 기타 리소스는 글꼴 선택을 넓힐 수 있지만
완전히 다른 글꼴을 사용하거나 외부 서비스의 글꼴을 사용하지 않을 수 있습니다.
@font-face로컬 글꼴 파일도 사용하도록 규칙을 수정할 수 있습니다.
우리는 사용자에게 원하는 글꼴 모음을 제공하고 다른 사이트에 의존하지 않고 사이트와 함께 호스팅 할 수 있습니다.
@font-face { font-family: "Roboto"; src: url(fonts/Roboto.woff2) format('woff2'), url(fonts/Roboto.woff) format('woff'), url(fonts/Roboto.tff) format('truetype'); }1. 주요 차이점은 웹 URL 대신 상대 파일 경로를 사용한다는 것입니다.
2. 사용할 파일을 지정하기 위해 각 파일의 형식을 추가합니다.
브라우저마다 다른 글꼴 유형을 지원하므로 여러 글꼴 파일 옵션을 제공하면 더 많은 브라우저가 지원됩니다.
현재 .woff2파일 크기가 크게 줄어들고 성능이 향상되어 미래의 방식으로 보이지만 많은 브라우저가 여전히 이를 지원하지 않습니다. Font Squirrel 과 같이 로컬에서 사용할 글꼴을 찾을 수있는 훌륭한 소스가 많이 있습니다 .
Free Fonts! Legit Free & Quality | Font Squirrel
Handpicked free fonts for graphic designers with commercial-use licenses.
www.fontsquirrel.com
적용방법 :
1. fonts/ directory 에서, 여러 글꼴 파일을 추가 한 것을 알 수 있습니다.
2. style.css 상단 에서 @font-face속성을 사용하여 선택기를 만들고 글꼴 모음을 지정하십시오
src의 url()괄호 안에 이 경로를 포함 시키고, format 지정 - truetype
@font-face { font-family: "Glegoo" src: url(../fonts/Glegoo-Regular.ttf) format('truetype'); }3 .
banner클래스 내에 중첩 된 단락을 대상으로하는 선택기를 사용하여
글꼴 모음 Glegoo과 글꼴 크기를 추가하십시오 20px.
.banner p { font-family: Glegoo; font-size: 20px; }'CSS' 카테고리의 다른 글
[CODECADEMY] CSS SIZING ELEMENTS (em, rem, 비율에 따른 크기 조정, 이미지 사이즈 조절, 배경화면) (0) 2020.06.23 [CODECADEMY] CSS 이미지 모양 / 이미지 원형 (border-radius) (0) 2020.06.23 [CODECADEMY] CSS Typography (폰트, 글꼴, 굵기, 기울기, 대문자, 소문자, 텍스트 정렬, 줄 간격) (0) 2020.06.23 [CODECADEMY] CSS COLOR (Named colors/ RGB / Hexadecimal/불투명도) (0) 2020.06.22 [CODECADEMY] 코드카데미 : Float 과 Clear (0) 2020.06.21