“소문자 숫자”(예 : 텍스트 숫자)를 구성하는 방법은 무엇입니까?


12

텍스트 그림 을 시뮬레이트하기 위해 글꼴 글리프를 조정하는 방법이 있습니까?

여기에 이미지 설명을 입력하십시오

배경

텍스트 숫자는 "소문자"입니다. 일반적으로 소문자를 사용하는 경우 소문자를 사용합니다 (예 : 문장 중간).

키보드는 대문자와 소문자로 만들어지지 않았습니다. 유니 코드는 그것들을 구체적으로 인코딩하지 않습니다. "그들은 안감 숫자와 분리 된 문자로 간주되지 않고 같은 문자를 쓰는 다른 방식 일뿐입니다."

그것은 나의 질문에 나를 데려 온다. 글꼴의 표준 "대문자"에서 소문자를 만드는 방법은 무엇입니까?

Wikipedia는 일반적으로 다음과 같이 언급 합니다 .

  • 012있습니다 x-height
  • 68 승천자가있다
  • 34579 후손이있다

여기에 이미지 설명을 입력하십시오

나의 첫 번째 시도 (포토샵에서)는 :

  • 스매시 012
  • 슬쩍 찌르다 34579 아래로
  • 그들이있는 곳에 68을 남겨 두십시오 :

여기에 이미지 설명을 입력하십시오

여기에 이미지 설명을 입력하십시오

그러나 skwooshed 수치 (0, 1, 2)는 분명히 불쾌한 것처럼 보입니다.

유니 코드 컨소시엄이 "소문자"를 단순히 "대문자"로 구성 할 수 있다고 제안하면 어떻게해야합니까?

이상적으로는 HTML

최종 목표는 브라우저에 소문자 텍스트를 표시하는 것입니다. 나는 일부 글꼴 (예 : Georgia)이 이미 모든 숫자를 소문자로 표시한다는 것을 알고 있습니다 :

여기에 이미지 설명을 입력하십시오

그러나 나는 Georgia 사용으로 전환하는 방법을 묻지 않습니다 . 비 라이닝 피겨에서 라이닝 피겨 를 구성 하는 방법을 묻고 있습니다.

그리고 이것은 웹에 표시하기 때문에 문자 당 형식을 적용해야 할 수도 있습니다.

<!doctype html">
<html>
<head>
    <style type="text/css">
        body {
            font-family: "Segoe UI", "Calibri", sans-serif;
            font-size: larger;
        }

        .xheight {
            font-size: 1.5ex;
        }

        .descender {
            position: relative;
            bottom: -0.4ex;
        }
    </style>
</head>
<body>
    <p>In the year <span class="xheight">21</span><span class="descender">5</span><span>6</span> the Romulan war...
</body>
</html>

다음과 같이 렌더링 :

여기에 이미지 설명을 입력하십시오

다시 말하지만, 내가 생각하는 것만 큼 기분이 좋지 않습니다.

이봐, 페니!

여기에 이미지 설명을 입력하십시오

답변:


11

가장 짧은 대답은 "아니오"입니다.

구식 인물 ( "소문자")은 구체적으로 그런 식으로 그려집니다. 대부분의 경우 레거시 포스트 스크립트 및 트루 타입 글꼴에는 글꼴이 디자인 된 방식에 따라 안감 또는 구식 인 표 형식의 그림 만 포함됩니다.

유니 코드 컨소시엄은 안감 그림이 구식 그림으로 왜곡 될 수 있다고 제안하지 않으며, 단순히 각 숫자에 대해 여러 글리프가 있는지 여부에 관계없이 0-9 숫자에 대해 한 세트의 유니 코드 값만 있음을 제안합니다.

많은 OpenType 글꼴에는 표 형식과 비례 너비로 안감 및 구식 그림이 모두 포함되어 있으며 표 안감 그림이 일반적인 기본값입니다. 이들은 일반적으로 문자 또는 단락 스타일의 환경 설정을 통해 OpenType을 인식하는 응용 프로그램에서 사용할 수 있습니다. 유니 코드 값을 공유하지만 글꼴 소프트웨어에서 윤곽선으로 존재하거나 존재하지 않는 별도의 대체 글리프입니다. (CSS의 글꼴 모음 중 Calibri에는 이전 스타일 그림이 있지만 Segoe UI에는 없습니다.)

인쇄상의 관점에서, 당신이 요구하는 것을 받아 들일 수있는 방법이 없을뿐만 아니라, 수용 가능한 방법 도 없다고 말하고 싶습니다 . 아시다시피, 기준선을 이동하고 안감 수치를 왜곡하여 거기에 도달하려고 시도하는 것은 끔찍한 것처럼 보입니다.


좋은 대답이지만 글꼴이 두 가지를 모두 포함 할 때 사용할 스타일 스타일을 CSS로 지정할 수있는 정도로 브라우저가 완전히 OpenType을 인식 할 때 질문을 제기하는 것 같습니다.
e100

1
또한 "Segoe UI", "Calibri"및 심지어 sans-serif도 실제 글꼴로 표시되도록 보장 할 방법이 없다는 것이 중요합니다. 사용 된 정확한 기준선 및 x 높이 값은 사용자가 설치 한 임의의 이전 스타일에서 훨씬 더 끔찍할 수 있습니다.
horatio

유니 코드 컨소시엄이 대문자 및 소문자 숫자에 대해 별도의 글리프를 인코딩 하지 않았지만 대문자 A( U+0041), 소문자 a( U+0061) 및 심지어 sᴍᴀʟʟ cᴀᴘɪᴛᴀʟ ( U+1D00)에 대해 별도의 글리프를 인코딩 한 이유에 대한 통찰력이 있습니까? 즉, 별도의 대문자와 소문자를 제외하지만 별도의 대문자와 소문자를 포함하는 추론은 무엇입니까?
Ian Boyd

마지막으로 "대문자""소문자"를 모두 포함하는 OpenType 글꼴의 이름을 지정할 수 있습니까?
Ian Boyd

1
@IanBoyd : 일반 대문자와 소문자는 의미가 다르기 때문에 문체를 바꾸는 것이 문체를 선택하는 것 이상입니다. 그러나 대문자와 소문자는 의미가 동일하므로 유니 코드가 인코딩하기를 원하는 것은 아무 것도 없습니다. 동일한 이유로 기울임 꼴, 작은 대문자, 소문자 등의 특정 인코딩이 없습니다. 찾은 작은 대문자는 음성학에서 뚜렷한 의미를 지니고 있기 때문에 강조되어 사용되지 않아야합니다 (이 경우 OpenType 기능 또는 이와 유사한 기능을 사용해야 함).
Wrzlprmft

5

소문자 숫자 / 숫자 또는 "올드 스타일 그림"을 렌더링하는 올바른 방법은 CSS를 사용하여 적절한 글꼴 기능을 선택하는 것입니다. 사용 된 글꼴은 우선이 글꼴 기능을 지원해야합니다. 웹 폰트에 대한 실제 지원은 그다지 강력하지 않은 것 같습니다.

찾고있는 CSS 설정은

font-feature-settings: "onum";

그리고 문서 :

OpenType 기능 및 onum특히 기능에 대한 설명서는 Microsoft의 OpenType Layout 태그 레지스트리 에서 찾을 수 있습니다 .

글꼴 기능에 대한 대체 문서 는 CSS에서 OpenType 기능을 코딩하는 방법 기사에서 볼 수 있습니다 .

공식적으로는

font-variant-numeric: oldstyle-nums;

그러나 Mozilla의 브라우저 호환성 참조 에 따르면 지원이 훨씬 약한 것 같습니다 .

이론적으로 이것은 OpenType 기능을 직접 참조하지 않기 때문에 OpenType 이외의 글꼴에서도 작동하므로 더 좋습니다. 같은 방법으로 다음을 사용해야합니다.

font-variant: small-caps; 

작은 캡 을 활성화 합니다. 마십시오 하지 등을 설정 오픈 타입 기능을 사용하여

font-feature-settings: "smcp";

font-variant속성이 이미 잘 지원되므로이 효과를 얻을 수 있습니다.


아니요, 가짜 작은 모자 font-variant: small-caps;를 만들기 때문에 사용하고 싶지 않습니다 . 항상 다른 글꼴을 사용하고 항상 OpenType 글꼴을 사용하십시오. 간단하고 해결되었습니다.
tchrist

정의 (에 따르면 w3.org/TR/CSS21/fonts.html#propdef-font-variant )는의 acceptable경우 small-caps기능이 위조되어있다. 이는 요구 사항이 아니며 고품질 사용자 에이전트가 올바른 작업을 수행합니다 (OpenType 기능에 맵핑). 위조 된 작은 대문자 대신 변경이없는 경우을 사용해야한다는 데 동의합니다 font-feature-settings. 일반적으로 가짜 작은 모자는 전혀 효과가없는 것보다 낫습니다.
Mikko Rantalainen
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.