私は持っている必要があるテキストウィジェットに取り組んでいますテーブルなどを表示するためのフォントで修正されました。特定のウィンドウに収まる文字の量を数えるには、使用しているフォントの高さと幅が必要です。 1文字の要素を作成して計算し、その要素の高さと幅を取得するクイック関数を作成しました。問題は、この幅と高さが浮動小数点ではなく整数であるということです。たとえば、Chromeでこの関数を呼び出すと 1em fontSizeとfontFamily monospace。幅8、高さ15になります。 高さの値は正しいですが、幅は実際には7.14のようなものです...これはそれほど多くはないようですが、1行に100文字を入力し始めると、オフセットが80ピクセルを超えることがわかります。
信頼できる方法で正確な値を取得する方法はありますか？
jqueryは使用しないでください。
ここに関数があります：
function getCharDimensions(fontFamily, fontSize) {
var body = document.getElementsByTagName("body");
var el = document.createElement("span");
el.style.position = "absolute";
el.style.top = "-100%"
el.style.fontFamily = fontFamily;
el.style.fontSize = fontSize;
el.innerHTML = "x";
body[0].appendChild(el);
var dimensions = {
height: el.offsetHeight,
width: el.offsetWidth
};
el.parentNode.removeChild(el);
return dimensions;
}
回答：
回答№1は0あなたはタイポグラフィの追跡とカーニングを考慮していません。すべての文字には、他の文字に合わせて調整し、読みやすくするために定義された追跡があります。
この場合、影響を受けるのはこれだけではありません。CSSは、デバイスのピクセル幅が1の通常の画面で10進ピクセルを読み取ることができないためです。 1.5px 存在しません。
パターンを検出した場合は、フォントサイズに適用して文字のトラッキングを削除し、 7.14px あなたはそれで合計を作ることができ、それは今よりも正確になるからです。
がんばろう！
EDIT
改善点として、幅と高さを探している文字を定義できます。 i 幅が m （はい、あなたがモノスペースで遊んでいることは知っていますが、これは良い改善です）。
function getCharDimensions(character, fontFamily, fontSize) {
//stuff
el.innerHTML = character;
//stuff
}