Làm cách nào để phát hiện một trong những phông chữ được xác định đã được sử dụng trong một trang web?

Giả sử tôi có quy tắc CSS sau trong trang của mình:

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

Làm cách nào tôi có thể phát hiện một trong những phông chữ được xác định đã đượ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 các phông chữ khác và khi người dùng không có phông chữ tôi muốn hiển thị một 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 muốn chỉ hiển thị liên kết này cho những người không cài đặt đúng phông chữ.

Tôi đã thấy nó được thực hiện theo một kiểu iffy, nhưng khá đáng tin cậy. Về cơ bản, một phần tử được thiết lập để 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ử cha. Vì vậy, những gì họ làm là đo chiều rộng của chuỗi kết xuất. Nếu nó phù hợp với những gì họ mong đợi cho phông chữ mong muốn trái ngược với phông chữ xuất phát, thì nó hiện diện. Điều này sẽ không làm việc cho các phông chữ đơn cách.

Đây là nơi nó đến từ: Trình phát hiện phông chữ Javascript / CSS (ajaxian.com; 12 tháng 3 năm 2007)

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 chưa.
Nó sử dụng kỹ thuật đơn giản và nên được chính xác hầu hết thời gian.

Trình kiểm tra jFont trên github

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

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

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

• "Phông chữ giả của tôi" trong Safari (và tôi tin rằng các trình duyệt webkit khác).
• "Phông chữ giả của tôi, 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 để phù hợp với Gecko.

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

Một kỹ thuật hoạt động là xem xét phong cách tính toán của phần tử. Điều này được hỗ trợ trong Opera và Firefox (và tôi trinh thám trong safari, nhưng chưa được thử nghiệm). IE (ít nhất là 7), cung cấp một phương thức để có được một kiểu, nhưng dường như đó là bất cứ thứ gì có trong biểu định kiểu, không phải là kiểu được tính toán. Thêm chi tiết về quirksmode: Nhận Kiểu

Đây là một chức năng đơn giản để lấy phông chữ được 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 nó đượ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à rất quan trọng.

Một cách hack thú vị mà bạn cũng có thể thử là tạo ra nhiều yếu tố ẩn với nhiều phông chữ khác nhau để cố gắng 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 một trang thu thập thống kê phông chữ tiện lợi với kỹ thuật này.

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ì đó đầy đủ hơn, hãy kiểm tra này .

Có một giải pháp đơn giản - chỉ cần sử dụng element.style.font:

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

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

Một giải pháp khác là cài đặt phông chữ tự động thông qua @font-faceđó 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ữ phần mềm miễn phí hoặc thậm chí tạo phông chữ của riêng bạn. Bạn sẽ cần cả hai .eot& .ttftập tin để hoạt động tốt nhất.

Calibri là một phông chữ thuộc sở hữu của Microsoft và không nên đượ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 sẽ đề nghị mua một giấy phép cho phông chữ và nhúng nó vào ứng dụng của bạn.

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 mình, 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/

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

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

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

Bạn có thể đặt Adobe Blank trong họ phông chữ sau phông chữ bạn muốn xem và sau đó mọi glyph không có trong phông chữ đó sẽ không được hiển thị.

ví dụ:

font-family: Arial, 'Adobe Blank';

Theo như tôi biết thì không có phương thức JS nào để nói glyphs nào trong một phần tử đang được hiển thị bằng phông chữ nào trong ngăn xếp phông chữ cho phần tử đó.

Điều này 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à họ cũng có phông chữ dự phòng được mã hóa cứng mà họ sẽ sử dụng nếu không tìm thấy glyph trong bất kỳ phông chữ nào trong ngăn xếp phông chữ. Vì vậy, trình duyệt có thể hiển thị một số glyphs trong một phông chữ không có trong ngăn xếp phông chữ hoặc cài đặt phông chữ trình duyệt của người dùng. Chrome Dev Tools sẽ hiển thị cho bạn từng phông chữ được hiển thị cho glyphs trong phần tử được chọn . Vì vậy, trên máy của bạn, bạn có thể thấy những gì nó đang làm, nhưng không có cách nào để biết những gì đang xảy ra trên máy của người dùng.

Cũng có khả năng hệ thống của người dùng có thể đóng một phần trong trường hợp này, ví dụ như Window thực hiện Thay thế Phông chữ ở cấp độ glyph.

vì thế...

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

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