「小文字」(つまり、テキストの数字)を作成する方法は?


12

テキスト図形をシミュレートするためにフォントグリフを調整する方法はありますか?

ここに画像の説明を入力してください

バックグラウンド

テキストの数字は「小文字」の数字です。通常、小文字のテキストを使用する場所では、小文字の数字を使用します(文の途中など)。

キーボードが大文字と小文字で作成されたことはありません。また、Unicodeはそれらを具体的にエンコードしません。「これらは、ライニングフィギュアとは別の文字とは見なされず、同じ文字を書く方法が異なるだけです」。

それは私の質問に私をもたらします。フォントの標準的な「大文字の数字」から小文字の数字を作成する一般的な方法は何ですか?

ウィキペディアは、通常それについて言及しています

  • 012あるx-height
  • 68 アセンダーがいます
  • 34579 子孫がいる

ここに画像の説明を入力してください

私の最初の試みは(Photoshopで)次のことをすることです。

  • がどんな012
  • 微調整34579ダウンを
  • 68のままにしてください:

ここに画像の説明を入力してください

ここに画像の説明を入力してください

しかし、歪んだ数字(0、1、2)は明らかに不快に見えます。

Unicodeコンソーシアムが、「小文字」を「大文字」から単純に構成できると提案した場合、何をすればよいですか?

理想的にはHTML

私の最終目標は、ブラウザーに小文字のテキストを表示することです。一部のフォント(ジョージア州など)で既にすべての数字が小文字で表示されていることは知っています。

ここに画像の説明を入力してください

しかし、ジョージアの使用に切り替える方法を尋ねているわけではありません。私は、非ライニングのものからライニング図を構築する方法を尋ねています。

これはWebでの表示用であるため、おそらく文字ごとの書式設定を適用する必要があることに気付きます。

<!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

非常に短い答えは「いいえ」です。

古いスタイルの数字(「小文字」)は、特にそのように描かれます。レガシーPostscriptおよびTrueTypeフォントには、ほとんどの場合、表形式の数字のみが含まれています。これらは、フォントの設計方法に応じて、裏打ちまたはオールドスタイルです。

Unicodeコンソーシアムは、各数字に複数のグリフが存在するかどうかにかかわらず、数字0-9のUnicode値のセットが1つだけであるという単純な理由で、ライニング数字を古いスタイルの数字に変形できることを提案していません。

多くのOpenTypeフォントには、表幅とプロポーショナル幅の両方で、表と裏の両方の図が含まれています。表の裏表は通常のデフォルトです。これらはすべて、OpenType対応のアプリケーションで、通常は文字スタイルまたは段落スタイルの設定で利用できます。これらはUnicode値を共有しますが、フォントソフトウェアのアウトラインとして存在する(または存在しない)個別の代替グリフです。(CSSのフォントファミリのうち、Calibriには古いスタイルの数字がありますが、Segoe UIにはありません。)

ビューの印刷上の観点からだけでなく、あなたが求めるものを行うには受け入れられな方法はありません、私は何もありませんでしょうね許容できる方法はどちらか、。あなたが発見したように、ベースラインをシフトし、ライニングの数字を歪ませることでそこに到達しようとするのは恐ろしいようです。


良い答えですが、CSSでフォントに両方が含まれる場合に使用する数字のスタイルを指定できる程度まで、ブラウザーが完全にOpenTypeに対応するようになるのは疑問です。
e100

1
また、「Segoe UI」、「Calibri」、さらにはsans-serifが実際に表示されるフォントであることを保証する方法がないことも重要なポイントです。使用される正確なベースラインとx高さの値は、ユーザーがインストールした任意の古いスタイルではさらにひどく見える場合があります。
horatio

Unicode Consortiumが大文字と小文字の個別のグリフをエンコードしなかったが、大文字AU+0041)、小文字aU+0061)、さらにはsᴍᴀʟʟcᴀᴘɪᴛᴀʟ U+1D00)の個別のグリフをエンコードした理由についての洞察はありますか?すなわち、大文字と小文字を別々に除外するが、大文字と小文字を別々に含む理由は何でしょうか?
イアン・ボイド

そして最後に、「大文字」「小文字」の両方の数字を含むOpenTypeフォントに名前を付けることができますか?
イアン・ボイド

1
@IanBoyd:通常の大文字と小文字は意味が異なるため、それらを切り替えることは文体上の選択以上のものです。ただし、大文字と小文字の意味は同じです。したがって、Unicodeがエンコードしたいものは何もありません。イタリック、スモールキャップ、小文字などの特定のエンコードがない同じ理由で。あなたが見つけるスモールキャップス文字は、音声学で明確な意味を持ち、強調のために使用されるべきではないためにのみエンコードされます(このためには、OpenType機能などを使用する必要があります)。
Wrzlprmft

5

小文字の数字/数字または「古いスタイルの数字」をレンダリングする正しい方法は、CSSを使用して適切なフォント機能を選択することです。当然、使用されるフォントは、最初にこのフォント機能をサポートする必要があります。Webフォントを使用した実世界のサポートは、それほど強力ではないようです。

お探しのCSS設定は

font-feature-settings: "onum";

およびドキュメント:

OpenType機能、onum特に機能のドキュメントは、MicrosoftのOpenTypeレイアウトタグレジストリにあります

フォント機能に関する代替ドキュメントは、記事「CSSでOpenType機能をコーディングする方法」にあります

公式には、使用することになっています

font-variant-numeric: oldstyle-nums;

Mozillaのブラウザ互換性リファレンスによると、そのサポートはさらに弱いようです。

理論的には、OpenType機能を直接参照しないため、OpenType以外のフォントでも動作するはずなので、これはより優れています。同じ方法で使用する必要があります:

font-variant: small-caps; 

スモールキャップを有効にます。次のようなOpenType機能設定を使用しないでください

font-feature-settings: "smcp";

font-variantプロパティが既に十分にサポートされているため、この効果を達成します。


いいえ、偽の小さなキャップfont-variant: small-caps;を作成するため、使用することはありません。常に他のフォントを使用し、常にOpenTypeフォントを使用します。シンプルで解決済み。
tchrist

定義(w3.org/TR/CSS21/fonts.html#propdef-font-variant)によるとacceptablesmall-caps機能が偽造されているかどうかです。これは要件ではなく、高品質のユーザーエージェントが正しいことを行います(OpenType機能にマップします)。偽造のスモールキャップの代わりに変更がない場合は、を使用する必要があることに同意しますfont-feature-settings。通常、偽の小さなキャップは、まったく効果がないよりも優れています。
ミッコランタライネン
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.