Kiểm tra xem client có font nào đó hay không

Kiểm tra xem client có font nào đó hay không

Trong bài viết này tôi sẽ trình bày cách kiểm tra xem tại máy client đã cài đặt font chữ nào đó hay chưa. Tôi sử dụng yếu tố mỗi font sẽ có độ dài chữ khác nhau để kiểm tra sự tồn tại của font chữ.

Đối với mỗi font chữ, độ dài của một chữ tương ứng với 1 font-size cố định thì thường khác nhau. Ví dụ như với chữ m ở font-size=50px, font Times New Roman có độ dài là 39px, font Arial là 42px, font Courier New là 30px.
Kỹ thuật phát hiện xem font có hay không bằng cách đo độ dài chữ với các font chuẩn sau đó sử dụng kỹ thuật lựa chọn font của CSS:

selector {
font-family: 'Font 1', 'Font 2';
}

Nếu font 1 tồn tại thì áp theo font 1, trái lại xem font 2 tồn tại hay không, nếu font 2 tồn tại thì áp theo font 2.
Do đó ta sẽ chọn font 2 là font cơ bản, font chuẩn mà client nào cũng có mà chúng có độ dài khác nhau: ‘monospace’, ‘sans-serif’ và ‘serif’.

Các bước làm như sau:
Bước 1: đo độ dài chữ m với các font cơ bản ở size 50px:

  • monospace: L1=30px
  • sans-serif: L2=42px
  • serif: L3=39px

Bước 2: đo độ dài của chữ m với font-family: ‘Font cần kiểm tra’, ‘font cơ bản’ ở 50px

  • ‘Font cần kiểm tra’,monospace: X1 px
  • ‘Font cần kiểm tra’,sans-serif: X2 px
  • ‘Font cần kiểm tra’,serif: X3 px

Bước 3: kiểm tra nếu phát hiện bất cứ Li khác Xi thì ‘font cần kiển tra’ tồn tại trên máy client. Trái lại, nếu tất cả Li=Xi thì font đó không tồn tại.

var baseFonts = ['monospace', 'sans-serif', 'serif'];
var c = "m";
var size = '50px';

var body = document.getElementsByTagName("body")[0];

// tạo span để chứa chữ m
var span = document.createElement("span");
span.style.fontSize = size;
span.innerHTML = c;
var defaultWidth = new Array();
for (var i = 0; i < baseFonts.length; i++) {
	// đo độ dài tương ứng với font thứ i
	span.style.fontFamily = baseFonts[i];
	body.appendChild(span); // phải gắn span vào document thì mới có offsetWidth
	defaultWidth.push(span.offsetWidth); // lưu lại độ dài
	body.removeChild(span);
}

function detectLocalFont(font) {
	for (var i = 0; i < baseFonts.length; i++) {
		// đo độ dài với font cần kiểm tra và font cơ bản thứ i
		span.style.fontFamily = font + "," + baseFonts[i];
		body.appendChild(span);
		// kiểm tra xem độ dài của span khi có font có khác với font cơ bản hay không
		var matched = (span.offsetWidth != defaultWidth[i]);
		body.removeChild(span);
		if (matched) return true;
	}
	return false;
}

Cách sử dụng:

var exists = detectLocalFont('Consolas');

Demo kiểm tra font trên máy của bạn:

Font Tồn tại?
Arial
Arial Black
Arial Narrow
Arial Rounded MT Bold
Bookman Old Style
Bradley Hand ITC
Century
Century Gothic
Comic Sans MS
Courier
Courier New
cursive
default
fantasy
Gentium
Georgia
Impact
King
Lalit
Lucida Console
Modena
monospace
Monotype Corsiva
Papyrus
sans-serif
serif
Tahoma
TeX
Times
Times New Roman
Trebuchet MS
Verdana
Verona
Khi trích dẫn bài viết từ tek.eten.vn, xin vui lòng ghi rõ nguồn. Chúng tôi sẽ rất cảm ơn bạn!