CSS 또는 JS에서 글꼴 문자 대체 사용

현재 this font을 사용하여 일부 대체 문자 글리프에 액세스하려고합니다.CSS 또는 JS에서 글꼴 문자 대체 사용

글꼴의 문자 subs는 "A.alt", "A.alt1", "B.alt"등과 같이 이름이 지정되어 있으므로 나중에 이동할 유니 코드가 없습니다.

나는 this을 찾았지만 요소 검사를 사용할 때 CSS 속성은 "알 수없는 속성 이름"오류를 반환합니다. 다른 방법이 있나요?

<html> 
    <meta charset="ISO-8859-1"> 
    <title>Glyph-test</title> 
    <style> 
     h1 { 
      font-family: Baron neue; 

     } 
     h1 span.A-alt { 
      font-variant-alternates: character-variant(A.alt); 
     } 
    </style> 


    <h1>Testing alternative <span class="A-alt">A</span></h1> 
</html>

출처

2016-10-07 Carl Papworth

당신이 파이어 폭스 나 사파리로 테스트 했습니까? 그들은 현재 font-variant-alternates를 지원하는 유일한 브라우저 인 것처럼 보입니다 : http://caniuse.com/#feat=font-variant-alternates – ausi

Firefox와 Chrome을 시도했습니다 –

font-variant-alternates 대신 font-feature-settings을 사용할 수 있습니다. 사용할 대체 방법에 따라 "salt" 또는 "salt" 2 또는 "salt" 3 (등등)으로 설정하십시오.

귀하의 CSS 코드는 다음과 같을 수 있습니다 :

h1 span.A-alt { 
    font-feature-settings: "salt" 2; 
}

출처

2016-10-07 09:09:35 ausi

Damn rad '! 그 친구 줘서 고마워. –

이것을 아래의 데이터 변형 기능과 결합 할 수 있습니까? –

나는 그렇게 생각하지 않는다. 그러나'alt-1','alt-2'와 같은 CSS 클래스를 만들어 다른 문자로 사용할 수 있습니다. 아마'alt-5' 이상을 필요로 할 것입니다. – ausi

-1

나에게 가장 좋은 방법은 HTML5의 data- 속성을 사용하는 것입니다. 당신이 원하는 그러나

<html> 
    <meta charset="ISO-8859-1"> 
    <title>Glyph-test</title> 
    <style> 
     h1 { 
      font-family: Baron neue; 

     } 
     h1 span.A-alt { 
      font-variant-alternates: character-variant(attr(data-variant)); 
     } 
    </style> 


    <h1>Testing alternative <span class="A-alt" data-variant="A.alt">A</span></h1> 
</html>

당신은 character-variant(attr(data-variant))을 구현할 수 있지만 포인트 권리를 얻을 : 귀하의 경우에는

그렇게처럼 구현할 수 있습니다. HTML &을 통해 전달한 값은 CSS에서 동일한 값을 사용합니다. attr(data-name)

출처

2016-10-07 08:46:46

글쎄, 실제로 속성이 실제로 작동하지 않는 것 같습니다. 내 주요 문제는 지금 대체 글리프에 액세스하는 것입니다. –

이것은 당신의 골프 linkss가 말하는 것입니다. - "CSS 값 및 단위 레벨 3은 콘텐츠 **뿐만 아니라 문자열 속성이 아닌 값 (예 : 숫자, 색상)에 CSS 속성에 attr() **을 사용할 수있는 기능을 추가합니다." downvoting하기 전에 더 조심스럽게 자신의 제안을 읽을 수 있습니까 ?? 지금 당신의 의견을 분열시키기 –

@NikhilNanjappa 맞습니다. 그러나 자세히 살펴보면 단일 브라우저가 해당 기능을 지원하지 않는다는 것을 알 수 있습니다. 저것은 나가 지적하고 싶었던 것, 애매함을 위해 유감스럽게 친다. – ausi

CSS 또는 JS에서 글꼴 문자 대체 사용

답변

관련 문제