Google 글꼴의 스타일 및 두께 지정

내 페이지 중 일부에서 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;
}