phát hiện những phông chữ được sử dụng trong một trang web

Question

Giả sử tôi có quy tắc CSS sau đây trong trang của tôi:

body { 
    font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; 
} 

Làm thế nào tôi có thể phát hiện mà một trong những phông chữ định nghĩa được sử dụng trong trình duyệt của người dùng?

Chỉnh sửa cho mọi người tự hỏi tại sao tôi muốn làm điều này: Phông chữ tôi phát hiện có chứa glyph không có sẵn trong phông chữ khác và khi người dùng không có phông chữ tôi muốn hiển thị liên kết yêu cầu người dùng để tải xuống phông chữ đó để họ có thể sử dụng ứng dụng web của tôi với phông chữ chính xác.

Hiện tại tôi đang hiển thị liên kết phông chữ tải xuống cho tất cả người dùng, tôi chỉ muốn hiển thị liên kết này cho những người không cài đặt phông chữ chính xác.

Answer 1

Tôi đã nhìn thấy nó được thực hiện theo một loại iffy, nhưng khá đáng tin cậy. Về cơ bản, một phần tử được đặt để sử dụng một phông chữ cụ thể và một chuỗi được đặt thành phần tử đó. Nếu phông chữ được đặt cho phần tử không tồn tại, nó sẽ lấy phông chữ của phần tử gốc. Vì vậy, những gì họ làm là đo chiều rộng của chuỗi được hiển thị. Nếu nó phù hợp với những gì họ mong đợi cho phông chữ mong muốn như trái ngược với phông chữ có nguồn gốc, nó có mặt.

Dưới đây là nó đến từ đâu: Javascript/CSS Font Detector (ajaxian.com; 12 Mar 2007)

Answer 2

Một kỹ thuật mà làm việc là nhìn vào phong cách tính của nguyên tố này. Điều này được hỗ trợ trong Opera và Firefox (và tôi recon trong safari, nhưng chưa được thử nghiệm). IE (7 ít nhất), cung cấp một phương thức để có được một phong cách, nhưng nó có vẻ là bất cứ điều gì trong stylesheet, không phải là phong cách tính toán. Thêm chi tiết về quirksmode: Get Styles

Dưới đây là một chức năng đơn giản để lấy font sử dụng trong một phần tử:

/** 
* Get the font used for a given element 
* @argument {HTMLElement} the element to check font for 
* @returns {string} The name of the used font or null if font could not be detected 
*/ 
function getFontForElement(ele) { 
    if (ele.currentStyle) { // sort of, but not really, works in IE 
     return ele.currentStyle["fontFamily"]; 
    } else if (document.defaultView) { // works in Opera and FF 
     return document.defaultView.getComputedStyle(ele,null).getPropertyValue("font-family"); 
    } else { 
     return null; 
    } 
} 

Nếu quy tắc CSS cho điều này là:

#fonttester { 
    font-family: sans-serif, arial, helvetica; 
} 

Sau đó, nó sẽ trả về helvetica nếu được cài đặt, nếu không, arial, và cuối cùng, tên của phông chữ sans-serif mặc định của hệ thống. Lưu ý rằng thứ tự các phông chữ trong khai báo CSS của bạn là đáng kể.

Một cuộc tấn công thú vị mà bạn cũng có thể thử là tạo nhiều phần tử ẩn với nhiều phông chữ khác nhau để tìm cách phát hiện phông chữ nào được cài đặt trên máy. Tôi chắc rằng ai đó có thể tạo ra một số liệu thống kê phông chữ tiện lợi khi thu thập trang bằng kỹ thuật này.

Answer 3

@pat Trên thực tế, Safari không cung cấp phông chữ được sử dụng, Safari thay vào đó luôn trả về phông chữ đầu tiên trong ngăn xếp cho dù nó được cài đặt, ít nhất là theo kinh nghiệm của tôi.

font-family: "my fake font", helvetica, san-serif; 

Giả sử Helvetica là một cài đặt/sử dụng, bạn sẽ nhận được:

• "font giả của tôi" trong Safari (và tôi tin rằng trình duyệt WebKit khác).
• "phông chữ giả, helvetica, san-serif" trong trình duyệt Gecko và IE.
• "helvetica" trong Opera 9, mặc dù tôi đọc rằng họ đang thay đổi điều này trong Opera 10 để khớp với Gecko.

Tôi đã vượt qua vấn đề này và tạo Font Unstack, kiểm tra từng phông chữ trong một ngăn xếp và chỉ trả lại phông chữ được cài đặt đầu tiên. Nó sử dụng mẹo mà @MojoFilter đề cập, nhưng chỉ trả về mẹo đầu tiên nếu nhiều cài đặt được cài đặt. Mặc dù nó bị điểm yếu mà @tlrobinson đề cập (Windows sẽ thay thế Arial cho Helvetica một cách âm thầm và báo cáo rằng Helvetica đã được cài đặt), nếu không nó hoạt động tốt.

FontUnstack

Answer 4

Tôi đã viết một công cụ JavaScript đơn giản mà bạn có thể sử dụng nó để kiểm tra xem một phông chữ được cài đặt hay không.
Nó sử dụng kỹ thuật đơn giản và phải chính xác phần lớn thời gian.

jFont Checker trên github

Answer 5

Một hình thức đơn giản là:

function getFont() { 
    return document.getElementById('header').style.font; 
} 

Nếu bạn cần một cái gì đó hoàn thiện hơn, kiểm tra this ra.

Answer 6

Có một giải pháp đơn giản

function getUserBrowsersFont() 
{ 
    var browserHeader = document.getElementById('header'); 
    return browserHeader.style.font; 
} 

chức năng này một cách chính xác sẽ làm những gì bạn muốn. Khi thực thi Nó sẽ trả về kiểu Font của người dùng/khách truy cập. Hy vọng điều này sẽ giúp

Answer 7

Một giải pháp khác là cài đặt phông chữ tự động qua @font-face, điều này có thể phủ nhận nhu cầu phát hiện.

@font-face { 
font-family: "Calibri"; 
src: url("http://www.yourwebsite.com/fonts/Calibri.eot"); 
src: local("Calibri"), url("http://www.yourwebsite.com/fonts/Calibri.ttf") format("truetype"); 
} 

Tất nhiên nó sẽ không giải quyết bất kỳ vấn đề bản quyền nào, tuy nhiên bạn luôn có thể sử dụng phông chữ miễn phí hoặc thậm chí tạo phông chữ của riêng mình. Bạn sẽ cần cả hai tệp .eot & .ttf để hoạt động tốt nhất.

Answer 8

Calibri là phông chữ do Microsoft sở hữu và không được phân phối miễn phí. Ngoài ra, yêu cầu người dùng tải xuống một phông chữ cụ thể không thân thiện với người dùng.

Tôi khuyên bạn nên mua giấy phép cho phông chữ và nhúng nó vào ứng dụng của bạn.

Answer 9

Bạn có thể sử dụng trang web này:

http://website-font-analyzer.com/

Nó chính xác những gì bạn muốn ...

Answer 10

Tôi đang sử dụng fount. Bạn chỉ cần kéo nút Fount vào thanh dấu trang của bạn, nhấp vào nó và sau đó nhấp vào một văn bản cụ thể trên trang web. Sau đó nó sẽ hiển thị phông chữ của văn bản đó.

https://fount.artequalswork.com/

Answer 11

Bạn có thể đặt Adobe Blank trong font-family sau khi font bạn muốn xem, và sau đó bất kỳ glyphs không trong phông chữ đó sẽ không được trả lại.

ví dụ::

font-family: Arial, 'Adobe Blank'; 

Theo tôi biết không có phương pháp JS nào cho biết glyph nào trong phần tử đang được hiển thị theo phông chữ nào trong phông chữ cho phần tử đó. Điều này là phức tạp bởi thực tế là các trình duyệt có cài đặt người dùng cho phông chữ serif/sans-serif/monospace và chúng cũng có phông chữ được mã hóa cứng của riêng chúng mà chúng sẽ sử dụng nếu không tìm thấy glyph trong bất kỳ các phông chữ trong một chồng phông chữ. Vì vậy, trình duyệt có thể hiển thị một số glyph trong một phông chữ không có trong phông chữ hoặc cài đặt phông chữ trình duyệt của người dùng.Chrome Dev Tools will show you each rendered font for the glyphs in the selected element. Vì vậy, trên máy tính của bạn, bạn có thể xem những gì nó đang làm, nhưng không có cách nào để nói những gì đang xảy ra trên máy của người dùng.

Cũng có thể hệ thống của người dùng có thể đóng vai trò như thế này, ví dụ: Window does Font Substitution ở cấp độ glyph.

như vậy ...

Đối với glyphs bạn quan tâm, bạn không có cách nào để biết liệu họ sẽ được trả lại bởi dự phòng trình duyệt/hệ thống của người dùng, ngay cả khi họ không có font bạn chỉ định .

Nếu bạn muốn kiểm tra nó trong JS bạn có thể làm cho glyphs cá nhân với một font-family bao gồm Adobe Trống và đo chiều rộng của họ để xem nếu nó là số không, NHƯNG bạn phải lặp kỹ lưỡng mỗi glyph và mỗi phông chữ bạn muốn thử nghiệm, nhưng mặc dù bạn có thể biết phông chữ trong ngăn xếp thành phần phông chữ không có cách nào biết phông chữ của trình duyệt của người dùng được định cấu hình để sử dụng cho ít nhất một số người dùng của bạn sẽ không đầy đủ. (Nó cũng không phải là bằng chứng trong tương lai nếu phông chữ mới xuất hiện và bắt đầu sử dụng.)