[英]Javascript: How can I get a browser's minimum font size?
獲得瀏覽器最小字體大小的最佳方法是什么? 我編寫了以下代碼,它進行了二進制搜索。 它有效,但我想知道是否有標准或更有效的方法。
function getMinimumFontSize() {
var el = document.createElement('div');
document.body.appendChild(el);
el.innerHTML = "<div><p>a b c d e f g h i j k l m n o p q r s t u v w x y z</p></div>";
el.style.fontSize = '1px';
el.style.width = '64px';
var minimumHeight = el.offsetHeight;
var least = 0;
var most = 64;
var middle;
for (var i = 0; i < 32; ++i) {
middle = (least + most)/2;
el.style.fontSize = middle + 'px';
if (e.offsetHeight === minimumHeight) {
least = middle;
} else {
most = middle;
}
}
return middle;
}
僅僅設置樣式並讀取它是行不通的,因為它將返回設置而不是瀏覽器實際使用的內容。
我需要最小字體大小,以便我可以動態地重新調整內容大小以將所有內容保留在一頁上,而無需滾動。 如果瀏覽器忽略我的字體大小更改,這很難做到,因為我已經低於最小值。 因此,對於這種情況,我將縮小其他內容,例如圖形。
我是這樣做的:
var ta = document.createElement('textarea');
ta.style.display = 'none';
ta.style.fontSize = '6px'; // I think this is the smallest possible, if not put smaller value
document.body.appendChild(ta); // needs to be part of DOM to be able to calculate
var minimumFontSize = window.getComputedStyle(ta, null).getPropertyValue('font-size'); // returns '20px' for me when I set minimum font size to 20px
編輯:這不適用於Firefox,所以我創建了一個新的,略有不同的方法:
var ta = document.createElement('div');
ta.style.fontSize = '6px';
ta.style.lineHeight = '1';
ta.innerHTML = 'a';
document.body.appendChild(ta);
var minimumFontSize = ta.clientHeight;
6年后,Chrome和Firefox都允許最小字體大小為零。 這是我的基本方法,類似於第一個答案中的第一個例子:
element.style.fontSize = 0;
let actualMinSize = getComputedStyle(element).fontSize;
您必須從計算結果中刪除“px”以獲取數字,並且必須顯示該元素,但它可以通過position:absolute;
這似乎適用於Chrome和Firefox,因此不需要clientHeight
解決方法AFAICT。
今年早些時候,在Chrome 73中,root em空間大小和Chrome中的最小字體大小設置存在問題。 從那時起,Chrome改變了他們的最小字體大小政策和用戶界面。 他們現在支持零最小值,Firefox也是如此。
我的應用程序有一個用戶大小的窗口,可以垂直滾動文本,元素的寬度通過font-size間接設置,因此更寬的元素等於更大的字體大小。 如果用戶試圖在配置的最小字體大小下面調整窗口大小,我需要將其作為最小元素寬度處理。
雖然我可以為一個元素設置font-size為零,但是字體大小低於3px是有問題的,因為字體大小越小,它與文本寬度的比例越小,以及我尚未完全調試的其他原因。 在某個時刻,請求的1px寬度減少允許我更改字體大小,但<div>
clientWidth凍結:更改font-size對寬度沒有影響。 減少2px是可以的,因為變化更大,或者看起來如此。 我可以在調試器的Watch窗格中將style.width設置為所需的值,這使我無法循環。
最奇怪的是我可以在不同的字體大小/寬度下引起這個問題,沒有精確的引爆點。 它更像是一個小變化有問題的范圍。 它可能是一個Chrome錯誤,但無論如何我看起來不太可能是3px以下。 我可以在這個元素中強制執行我自己的最小3px,以簡單地回避這些問題。
我的問題出現在以下瀏覽器中:QQBrowser *¹ 和搜狗資源管理器 *²。
如果您將任何元素插入或更改為 9px 以下的字體,它會忽略並保留 9px。
也許我的問題與上面提到的有點不同,但我用這個 polyfill 解決了它:
// get-min-visible-font-size.js v1
function getMinVisibleFontSize() {
var spanFS = document.createElement('span');
spanFS.setAttribute('style', 'font-size:1px!important;display:none!important;');
document.body.appendChild(spanFS);
var minFontSize = parseInt(getComputedStyle(spanFS).fontSize);
document.body.removeChild(spanFS);
return minFontSize;
};
我選擇返回一個整數值,因為它使以后的測試更容易:
if( getMinVisibleFontSize() > 6){
[...]
};
但是所有的返回值實際上都是以像素為單位的。
它是如何工作的:只需使用 font-size = 1px 發送垃圾郵件,將其添加到正文並檢查字體大小。 如果它大於 1px,那么您所在的瀏覽器會限制最小字體大小(在這些情況下為 9px 或 12px)。 重要的是該值不為零,因為如果在所有情況下都檢查零,則文本消失並且即使在這些瀏覽器中也會得到零。
可能是以后有一些CSS定義了min-font-size和min-width,所以我把函數名設為minVisibleFontSize。
適用於 IE-11,但我沒有為舊瀏覽器執行此操作...
¹ = QQBrowser v10.8.3,基於 Chromium 70.0.3538.25。 (9px) ² = Sogou Explorer v11.0.1.34700,基於 Chromium 80.0.3987.87 我認為是因為它在 userAgent 中。 (12 像素)
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.