phát hiện hỗ trợ in đậm và in nghiêng

Question

Một số phông chữ không hỗ trợ CSS in nghiêng hoặc in đậm (ví dụ: Zapfino không hỗ trợ in nghiêng, vì nó trông khá đẹp). Tôi muốn phát hiện khi kiểu phông không được hỗ trợ để tôi có thể tắt các nút tạo kiểu trong trình chỉnh sửa.

tôi đã cố gắng một cái gì đó like this:

that.checkFontData = function(fontList) 
{ var test = $("<span style='font-size:24px;absolute;visibility:hidden;height:auto;width:auto;white-space:nowrap;'>abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ12345678910</span>"); 
    $('body').append(test); 
    for (var i= 0, iMax = fontList.length; i < iMax; ++i) 
    { test.css('fontFamily', fontList[i]); 
     var normalWidth = test.outerWidth(true); 
     var normalHeight = test.outerHeight(true); 
     test.css('fontStyle', 'italic'); 
     var italicWidth = test.outerWidth(true); 
     var italicHeight = test.outerHeight(true); 
     test.css('fontStyle', 'normal'); 
     test.css('fontWeight', 'bold'); 
     var boldWidth = test.outerWidth(true); 
     var boldHeight = test.outerHeight(true); 
     console.log(fontList[i] + ", normal: " + normalWidth + ", bold: " + boldWidth + ", italic: " + italicWidth ); 
    } 
    test.remove(); 
}; 

nhưng nó không hoạt động ... nhiều phông chữ mà cung cấp báo cáo in nghiêng hoặc đậm độ rộng tương tự.

Tiếp theo, tôi nghĩ để phát hiện điều này với phần tử canvas, nhưng, than ôi, firefox thậm chí không hiển thị văn bản in nghiêng trong canvas để botches có ý tưởng đó.

Bạn sẽ đề xuất điều gì?

Answer 1

Sử dụng Font.js bạn có thể có quyền truy cập đáng tin cậy hơn vào chỉ số phông chữ cho phép tính của mình. http://pomax.nihongoresources.com/pages/Font.js

Answer 2

Tôi đã kiểm tra mã của bạn trong jsFiddle, và nó cung cấp cho các kích cỡ khác nhau cho phông chữ web tự nhiên như Georgia và Arial, nhưng không phải cho một phông chữ được nạp từ bên ngoài như Snowburst One (Googlefont).

JS fiddle of your script

Sau khi một số nghiên cứu tôi đã phát hiện ra rằng cho @font-face phông chữ được nạp không css font-biến đổi được áp dụng. Người nạp @font-face biến và áp dụng chúng như vậy:

body { font-family:"DroidSerifRegular", Georgia, serif; } 
h1 { 
    font-family:"DroidSerifBold", Georgia, serif; 
    font-weight:normal; 
} 
em { 
    font-family:"DroidSerifItalic", Georgia, serif; 
    font-weight:normal; 
    font-style:normal; 
} 
strong em { 
    font-family:"DroidSerifBoldItalic", Georgia, serif; 
    font-weight:normal; 
    font-style:normal; 
} 

Nếu bạn đang sử dụng @font-face phông mà có sự thay đổi như trong ví dụ trên, bạn có thể có thể đưa ra một số loại quy ước đặt tên. Sau đó, bạn có thể kiểm tra xem các phông chữ này có tồn tại hay không bằng cách kiểm tra chiều rộng so với phông chữ dự phòng.

test.css('fontFamily', 'sans-serif'); 
var defaultWidth = test.outerWidth(true); 

for (var i= 0, iMax = fontList.length; i < iMax; ++i) 
{ test.css('fontFamily', fontList[i] + ', sans-serif'); 

    var normalWidth = test.outerWidth(true); 
    var normalHeight = test.outerHeight(true); 
    test.css('fontFamily', fontList[i] + 'Italic, sans-serif'); 
    var italicWidth = test.outerWidth(true); 
    var italicHeight = test.outerHeight(true); 
    test.css('fontFamily', fontList[i] + 'Bold, sans-serif'); 
    var boldWidth = test.outerWidth(true); 
    var boldHeight = test.outerHeight(true); 
    console.log("default: "+ defaultWidth + ", " fontList[i] + ", normal: " + normalWidth + ", bold: " + boldWidth + ", italic: " + italicWidth ); 
} 

Nếu phiên bản theo kiểu có chiều rộng thay đổi so với mặc định thì đó là "Bingo"!

Lưu ý: thao tác này sẽ không hoạt động đối với phông chữ đơn cách, vì chiều rộng của tất cả các ký tự luôn giống nhau.

Answer 3

Để phát hiện bold và nghiêng hỗ trợ, bạn có thể chuyển đổi văn bản thành hình ảnh và so sánh chúng.

Cách để làm điều đó là:

1. tạo canvas^{Xem dưới đây} (không cần phải thêm nó vào DOM)
2. bốc thăm văn bản trong canvas
3. chuyển đổi vải thành một hình ảnh (ở đây tôi sử dụng png)
4. so sánh chuỗi base64 của hình ảnh

Về canvas:

Tiếp theo, tôi nghĩ để phát hiện điều này với một yếu tố canvas, nhưng, than ôi, firefox không thậm chí làm cho văn bản in nghiêng trong canvas, do đó botches ý tưởng đó.

Một số phông chữ không in nghiêng trong canvas trong Firefox vì phông chữ nghiêng gốc không tồn tại. Các trình duyệt khác sẽ cố gắng psuedo-italicize (nghiêng) phông chữ.

View on jsFiddle (demo này cũng kiểm tra cho phông chữ Google Snowburst One)

function detectBoldItalic(fonts) { 
    // Create canvas 
    var canvas = document.createElement('canvas'); 
    canvas.width = 1000; 
    canvas.height = 30; 
    var context = canvas.getContext("2d"); 
    var test = {}, results = {}; 
    // Default 
    context.font = "normal 16px a base case font"; 
    context.fillText("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ12345678910", 10, 20); 
    var standard = canvas.toDataURL("image/png"); 
    context.setTransform(1, 0, 0, 1, 0, 0); 
    context.clearRect(0, 0, canvas.width, canvas.height); 
    // Start test 
    for (var i = 0; i < fonts.length; i++) { 
     var styles = ["normal", "bold", "italic"]; 
     test[fonts[i]] = {}; 
     results[fonts[i]] = {}; 
     for (var j = 0; j < styles.length; j++) { 
      // Draw text in canvas 
      context.font = styles[j] + " 16px " + fonts[i]; 
      context.fillText("abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ12345678910", 10, 20); 
      // Convert canvas to png 
      test[fonts[i]][styles[j]] = canvas.toDataURL("image/png"); 
      // Clear canvas 
      context.setTransform(1, 0, 0, 1, 0, 0); 
      context.clearRect(0, 0, canvas.width, canvas.height); 
     } 
     if (test[fonts[i]]["normal"] !== standard) { 
      results[fonts[i]]["bold"] = test[fonts[i]]["normal"] !== test[fonts[i]]["bold"] ? true:false; // Support bold 
      results[fonts[i]]["italic"] = test[fonts[i]]["normal"] !== test[fonts[i]]["italic"] ? true:false; // Support italic 
     } else { 
      results[fonts[i]] = false; // Font does not exist 
     } 
    } 
    return results; 
} 
console.log(detectBoldItalic(["Arial","Zapfino"]));