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

Program / 글쓴이

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

답변