내 페이지 중 일부에서 Google 글꼴을 사용하고 있으며 다양한 글꼴을 사용하려고 할 때 벽에 부딪 혔습니다. 예 : http://www.google.com/webfonts#QuickUsePlace:quickUse/Family:Open+Sans
링크 태그를 통해 Normal, Bold, ExtraBold의 세 가지 얼굴을 가져옵니다. 정상적인 얼굴은 올바르게 표시되지만 CSS에서 글꼴 변형을 사용하는 방법을 알 수 없습니다.
나는 글꼴 패밀리의 속성으로 다음을 모두 시도했지만 주사위는 없었습니다.
- ‘Open Sans Bold’
- ‘Open Sans 700’
- ‘Open Sans Bold 700’
- ‘Open Sans : Bold’
Google 문서 자체는 많은 도움을 제공하지 않습니다. 누구나 이러한 변형을 표시하기 위해 CSS 규칙을 작성하는 방법에 대한 아이디어가 있습니까?
답변
그들은 일반 CSS를 사용합니다.
다음과 같이 일반 글꼴 모음을 사용하십시오.
font-family: 'Open Sans', sans-serif;
이제 다음을 추가하여 글꼴의 “무게”를 결정합니다.
반 굵게
font-weight:600;
굵게 (700)
font-weight:bold;
매우 굵게 (800)
font-weight:800;
이와 같이 대체 증거가 있으므로 Google 글꼴이 백업 글꼴 Arial / Helvetica (Sans-serif)에 “실패”하면 Google 글꼴과 동일한 가중치를 사용합니다.
꽤 똑똑 해요 🙂
다른 글꼴 두께는 헤더의 링크 태그 URL (Google 글꼴 URL의 패밀리 쿼리 매개 변수)을 통해 특별히 가져와야합니다.
예를 들어 다음 링크에는 가중치 400과 700이 모두 포함됩니다.
<link href='fonts.googleapis.com/css?family=Comfortaa:400,700'; rel='stylesheet' type='text/css'>
답변
문제는 다음과 같습니다. Google의 글꼴 세트에없는 글꼴 두께는 지정할 수 없습니다. 글꼴 아래의 SEE SPECIMEN 링크를 클릭 한 다음 STYLES 섹션까지 아래로 스크롤합니다. 특정 글꼴에 사용할 수있는 각 “스타일”이 표시됩니다. 안타깝게도 Google은 각 스타일에 대한 CSS 글꼴 가중치를 나열하지 않습니다. 이름이 CSS 글꼴 두께 번호에 매핑되는 방법은 다음과 같습니다.
Thin 100
Extra Light 200
Light 300
Regular 400
Medium 500
Semi-Bold 600
Bold 700
Black 900
9 개의 가중치가 모두있는 글꼴은 거의 없습니다.
답변
font-family:'Open Sans' , sans-serif;
빛의 경우 :
font-weight : 100;
또는
font-weight : lighter;
정상의 경우 :
font-weight : 500;
또는
font-weight : normal;
굵게 :
font-weight : 700;
또는
font-weight : bold;
더 대담하게 :
font-weight : 900;
또는
font-weight : bolder;
답변
Google Fonts에 지정된 가중치 값을 사용할 수 있습니다.
body{
font-family: 'Heebo', sans-serif;
font-weight: 100;
}