Bỏ qua tuyên bố @ phông mặt để ghi đè họ phông chữ "helvetica"

Tôi có một bookmarklet chèn tiện ích vào trang của bất kỳ trang nào. Phong cách của widget đã được phá vỡ bởi một trang web nhất định mà có CSS @font-face khai báo như sau:Bỏ qua tuyên bố @ phông mặt để ghi đè họ phông chữ "helvetica"

@font-face { 
    font-family: "helvetica"; 
    src: url("http://cdn2.yoox.biz/Os/fonts/helveticaneueltstdmdcn.eot?iefix") format("eot"), 
     url("http://cdn2.yoox.biz/Os/fonts/helveticaneueltstdmdcn.woff") format("woff"), 
     url("http://cdn2.yoox.biz/Os/fonts/helveticaneueltstdmdcn.ttf") format("truetype"), 
     url("http://cdn2.yoox.biz/Os/fonts/helveticaneueltstdmdcn.svg#svgFontName") format("svg"); 
}

Các widget mà chèn bookmarklet tôi sử dụng helvetica ở khắp mọi nơi và trên một trang web này có vẻ khủng khiếp vì trình duyệt là lập bản đồ helvetica vào khai báo @font-face của tên đó thay vì phông chữ hệ thống helvetica chuẩn.

Câu hỏi: có cách nào để ghi đè/bỏ qua tuyên bố @font-face này hoặc tạo một tuyên bố @font-face khác ánh xạ tới phông chữ hệ thống helvetica không?

Nguồn

2012-06-12 Tautologistics

@PerSalbark: Nó sẽ được gỡ bỏ trước khi bạn có thể chớp mắt :) – thirtydot

Trừ stylesheet ghi đè nó bằng cách tham khảo stylesheet với !important sau stylesheet của widget của bạn, điều này có thể làm việc:

@font-face { 
    font-family: 'ProperHelvetica'; /* Make a name for the "proper" Helvetica */ 
    src: local('helvetica'); /* Assign it to the Helvetica font on the user's system */ 
} 
.your-widget { 
    font-family: 'ProperHelvetica', helvetica, sans-serif !important; /* Make everything 
in your widget use the "proper" Helvetica and if the user doesn't have it, 
use the site's helvetica. */ 
}

Nguồn

2012-06-12 15:44:04

Mặc dù tôi đã trả lời câu hỏi của riêng mình, tôi sẽ chấp nhận câu hỏi của bạn vì đó là giải pháp không tự đăng đầu tiên =) – Tautologistics

Ngay sau khi tôi gửi câu hỏi này, tôi đã có một số nguồn cảm hứng. Những gì tôi thấy việc làm là những điều sau đây ...

Tạo một quy tắc css sau:

@font-face { 
    font-family: 'RealHelvetica'; 
    src: local('helvetica'); 
}

Trong các yếu tố đó có yêu cầu hệ thống phông chữ helvetica thực xác định font-family là 'RealHelvetica' thay vì chỉ helvetica:

.widget { 
    font-family: 'RealHelvetica',helvetica,sans-serif !important; 
}

Nguồn

2012-06-12 15:34:29 Tautologistics

Bạn có thể thêm css sau để tạo một tên phông chữ tùy chỉnh bản đồ để một phông chữ được cài đặt cục bộ:

@font-face{ 
    font-family: mycustomuniquefontname; 
    src: local("Helvetica"); 
}

Đối với phong cách của widget bạn nên sử dụng này:

font-family: mycustomuniquefontname, Helvetica, sans-serif;

Nếu bạn đang sử dụng nhiều kiểu phông chữ như đậm và nghiêng, bạn phải xác định tất cả trong số họ:

@font-face{ 
    font-family: mycustomuniquefontname; 
    src: local("Helvetica"); 
} 
@font-face{ 
    font-family: mycustomuniquefontname; 
    src: local("Helvetica Bold"); 
    font-weight: bold; 
} 
@font-face{ 
    font-family: mycustomuniquefontname; 
    src: local("Helvetica Italic"); 
    font-style: italic; 
} 
@font-face{ 
    font-family: mycustomuniquefontname; 
    src: local("Helvetica Bold Italic"); 
    font-weight: bold; 
    font-style: italic; 
}

Nguồn

2012-06-12 15:37:14 ausi

Quấn của bạn trong một iframe. Không biết nếu nó là giải pháp tốt nhất, nhưng nó là một giải pháp.

http://jsfiddle.net/bwcNX/

var $frame = $('<iframe style="width:200px; height:100px;">'); 
$('body').append($frame); 
setTimeout(function() { 
    var $doc = $($frame[0].contentWindow.document.documentElement); 
    $doc.html("<head><title>abc</title></head><body><div>def.</div></body></html>"); 
    $doc.find('div').append('<div>ghi.</div>'); 
}, 1);

Bonus: Nên bằng chứng trong tương lai phụ tùng của bạn chống lại hầu hết các CSS khác hoặc các vấn đề phông chữ liên quan.

Nguồn

2012-06-12 15:39:18

Tuyệt vời điểm nhưng các chức năng/tương tác của tiện ích con của tôi ngăn cản sử dụng iFrame. Nói chung, đó sẽ là lựa chọn khả thi. – Tautologistics

Bỏ qua tuyên bố @ phông mặt để ghi đè họ phông chữ "helvetica"

Trả lời

Các vấn đề liên quan