@ font-face, font variant

Question

이것은 내 글꼴의 대담하고 과감한 버전 인 다른 글꼴 변형을 지원하는 my @ font-face 선언입니다.

@font-face { 
    font-family: "santana"; 
    src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype'); 
    font-weight: normal; 
    font-style: normal; 
} 
@font-face { 
    font-family: "santana"; 
    src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype'); 
    font-weight: bold; 
} 
@font-face { 
    font-family: "santana"; 
    src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype'); 
    font-weight: bolder; 
} 

지금은 Chrome과 Firefox에서만 작업하고 있습니다. Chrome에서는 정상적이고 대담한 변형이 작동하지만 대담한 변형은 없습니다 ('대담한'변형을 유지함). Firefox에서는 대담한 변형 만 예상대로 작동하지만 다른 경우에는 더 큰 변형이 사용됩니다 (일반 가중치에도 해당).
이 문제는 알려진 문제입니까? 아니면이 선언을 수행하는 더 좋은 방법이 있습니까?

Answer 1

여기에 2 개의 분리 문제가 있습니다 : 글꼴 체중 키워드가 아닌 숫자 값

1. 사용은.
2. 필요한 경우 IE8 (및 이전 버전)을 지원합니다.

키워드

폰트 중량 키워드의 문제가 lighter 및 bolder는 (각각 항상 400 및 700) normal 및 bold 같은 절대 값이 아니지만 상대적 있다는 것으로 보인다

부모 요소의 확고한 대담 함 (100 밝거나 어두움). lighter 및 bolder을 절대 값처럼 처리 할 수는 없습니다.

@HTMLDeveloper와 @Christoph가 제안했듯이 키워드가 아닌 숫자 값을 사용하는 것이 쉬운 해결책이며, 그 자체로 적절한 해결책이 될 수 있습니다 (IE8에 대한 지원이 필요하지 않은 경우). 여러 가중치 또는 스타일이 같은 font-family 이름과 관련된 경우

@font-face { 
    font-family: "santana"; 
    src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype'); 
    font-weight: 400; 
    font-style: normal; 
} 
@font-face { 
    font-family: "santana"; 
    src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype'); 
    font-weight: 700; 
} 
@font-face { 
    font-family: "santana"; 
    src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype'); 
    font-weight: 900; /* or whatever weight you need to use for "bolder" */ 
} 

IE8 및 이전

일부 브라우저는 디스플레이 문제가 있습니다. 1 개 이상의 무게가 글꼴 - 가족 이름에 연결되어

• 는 IE8 디스플레이 문제가 (다른 사람이있을 수 있습니다에게)   :

  구체적인 문제는 내가 알고 있어요.

• 4 개 이상의 가중치 또는 스타일이 글꼴 모음 이름에 연결되면 IE6/7/8에 표시 문제가 있습니다.

이 솔루션은 각 글꼴의 변화에 ​​대한 고유 font-family 이름을 사용하는 것입니다

@font-face { 
    font-family: "santana"; 
    src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype'); 
} 
@font-face { 
    font-family: "santana-bold"; 
    src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype'); 
} 
@font-face { 
    font-family: "santana-bolder"; 
    src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype'); 
} 

이 방식은 일반적으로 Typekit 같은 글꼴 서비스에 의해 사용된다. 다양한 브라우저 지원 (특히 IE8 이상)이 필요한 경우 글꼴 포함시 지불해야하는 가격 중 하나로 간주 될 수 있습니다.

Answer 2

font-face 단일 글꼴에서 글꼴 패밀리 이름의 따옴표는 필요하지 않습니다. 제거하고 실행하면 정상적으로 작동합니다. font-family: santana; font-weight: 900;은 단일 글꼴을 필요로하지 않으므로 여러 글꼴 만 있으면됩니다. 과도하게 사용하는 수치 대신에 잘 작동해야합니다.