주어진 글꼴 군에서 사용할 수있는 글꼴 가중치를 어떻게 지정합니까?

Question

웹 글꼴을 사용하고 있으며 가중치가 300 (밝은)과 700 (굵은 글꼴)입니다. 그것들은 사이트가 사용하는 유일한 가중치이고, 내 html 요소에서 기본 글꼴 체중이 300이어야한다고 지정합니다.

브라우저가 <strong> 태그를 발견하면 기본 스타일이 적용됩니다 (브라우저 스타일이 맞는지 확실하지 않음). 기본 시트 또는 normalize.css)는 font-weight: bolder입니다. 이것은 나에게 의미가 있습니다. 나는 한 단계 더 과감하게 움직이고 싶습니다. 그리고 세 가지 가중치가 있다고 가정 해 봅시다. 상속 된 가중치가 무엇이든 상관없이 다음 단계로 넘어 가기를 바랍니다.

그러나 본문 텍스트 어딘가에있는 <strong> 요소의 bolder은 가중치를 300에서 400으로 높이며 브라우저는 주변 텍스트와 동일한 300 - 가중치 글꼴로 렌더링합니다. 분명히 나는 ​​사용할 수있는 다음 무게가 700임을 깨닫고 그것을 사용하고 싶습니다.

lighter 및 bolder의 목적으로 주어진 글꼴 군에 대해 CSS/브라우저에 어떤 글꼴 가중치를 사용할 수 있는지 알려주는 방법이 있습니까?

Answer 1

라이터의 목적과 대담 가중치가 주어진 글꼴 가족을 위해 사용할 수 있는 폰트/브라우저를, CSS를 알 수있는 방법이 있나요?

아니요. 브라우저에는 모든 글꼴과 무게가 필요합니다. 당신이 원하거나 필요로하는 과감한 의미의 글꼴, 글꼴, 당신은 당신이 그것을 사용하고자하는 대담함과 모든 글꼴을로드해야합니다.

당신은 너무 같은 글꼴 및 가중치를 포함하는 시도 할 수 있습니다 :

<link href='fonts.googleapis.com/css?family=Comfortaa:400,700'; rel='stylesheet' type='text/css'> 

이 가

더 자세한 내용은 여기를 참조하십시오 https://stackoverflow.com/a/7256119/2008111

Answer 2

당신은 너무 여전히 사용할 수있어 그 lighter의 간격 bolder을 재정의에 대해 물어됩니다 그러나 여러 단계에서 글꼴의 두 가지 가중치 만 사용한다고 말하기 시작합니다.

당신은 실제로 여러 단계가 필요하지 않지만, stronger 태그가 당신에게 굵은 텍스트를 제공하기 위해 단지를 들어, 당신은 단순히 당신의 CSS에서이 무엇을 변경할 수 있습니다 경우 명백한

strong { font-weight: bold; } 

Answer 3

하나 해결 방법은 webfont의 light 버전을 300보다는 400 weight로 정의하는 것입니다. 그러나 @ font-face 규칙을 제공하는 Google Fonts에서 글꼴을로드하는 중이므로이 작업을 수행 할 수 없습니다.

선택의 여지가 없다면 @ font-face를 수동으로 재정의하고 Google이 링크를 변경하지 않기를 바랍니다. :)

정말로 다른 해결책이 없다면 글꼴을 직접 제공 할 수 있습니다.

@import url('https://fonts.googleapis.com/css?family=Raleway:400,900'); 
 

 
@font-face { 
 
    font-family: 'Raleway'; 
 
    font-style: normal; 
 
    font-weight: 100; 
 
    src: url(https://fonts.gstatic.com/s/raleway/v12/PKCRbVvRfd5n7BTjtGiFZAzyDMXhdD8sAj6OAJTFsBI.woff2) format('woff2'); 
 
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215; 
 
} 
 

 
p:nth-child(1) { 
 
    font-family: Raleway; 
 
    font-weight: 100; 
 
} 
 

 
p:nth-child(2) { 
 
    font-family: Raleway; 
 
    font-weight: 400; 
 
} 
 

 
p:nth-child(3) { 
 
    font-family: Raleway; 
 
    font-weight: 900; 
 
}

<div class="wrapper"> 
 
    <p>This should be thin but is bold</p> 
 
    <p>This is regular</p> 
 
    <p>This is bold</p> 
 
</div>