1

2 つのフォントの間に適切なカーニングを追加したいと考えています。具体的には、私は現在持っています（2つの例）：

div.hw_count {
    display: inline-block;
    vertical-align: middle;
}
div.hw_count p {
    font-style: italic;
    font-family: Arial;
    font-size: 80px;
}
div.hw_count_separator {
    display: inline-block;
    vertical-align: middle;
}
div.hw_count_separator p {
    font-family: Arial;
    font-size: 30px;
}
<div class="hw_count"><p>1</p></div>
<div class="hw_count_separator"><p>x</p></div>

<span style=padding:20px></span> <!-- just to space examples apart -->

<div class="hw_count"><p>2</p></div>
<div class="hw_count_separator"><p>x</p></div>

問題は、数字と「x」の間の間隔をすべての数字で同じように表示したいということです。数字「1」の方が明らかに大きく見えます（フォントの太さ/ファミリー/スタイルを変更すると、さらにはっきりと見えることがあります）。

div私の例では、数字と「x」が異なるsにあることを考えると、魔法のカーニングを行う方法があるとは思いません。しかし、指定されたフォント/桁の右側の空白を適切に減らす単純な CSS のみの方法はありますか?

私の唯一の解決策は、数字ごとにjavascriptを微調整することです（おそらく、数字「1」のみを微調整する必要があります）。ただし、フォントを変更すると、これが壊れる可能性があると思います。再調整する必要はありません。

4

1 に答える 1

1

tl;dr; おそらくコードで努力する価値はありません。その特別なインスタンスにクラスを適用するか、コンテンツで要素を検索するだけです.jQueryでは、そのように見えて$('.hw_count p:contains("1")');、そのための特別なクラスを設定します.

実際のテキスト メトリックは、少しわかりにくいものです。私たちが自由に使える最も正確なツールである canvas を使用しても、(ライブラリなしで) 一貫して幅しか取得できません。ただし、特定の寸法よりも細い文字の幅は同じです (これはフォント ファミリの特性です)。「1」と「2」の幅は、テストしたフォントで同じです: Arial、Verdana、Times: http://codepen.io/anon/pen/zrjxQM

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.font = '80px Arial';

var text = ctx.measureText("1");
console.log('1: ' + text.width);

text = ctx.measureText("2");
console.log('2: ' + text.width);

text = ctx.measureText("M");
console.log('M: ' + text.width);

text = ctx.measureText("10");
console.log('10: ' + text.width);

上記のコードは次の結果をもたらします。

1: 44.4921875
2: 44.4921875
M: 66.640625
10: 88.984375

役立つ可能性のある属性は actualBoundingBoxRight と actualBoundingBoxLeft ですが、これらは Chrome で実験的にのみサポートされています: https://developer.mozilla.org/en-US/docs/Web/API/TextMetricsであり、その場合でも、同じことを報告すると思われます。上記のように。

http://fabricjs.com/docs/fabric.Text.htmlのようなライブラリや、ここで示されている純粋な JS ソリューションを試すこともできますhttp://galacticmilk.com/journal/2011/01/html5-typographic-metrics/ #measure all は、文字の周りに存在する同じ「境界ボックス」に基づいて報告および計算される可能性があります。

キャンバスから画像を作成してから実際のピクセルを測定することもできますが、それはわずかな利益のためには大変な作業です。

于 2016-01-27T14:42:51.687 に答える