Tôi đã sử dụng biểu định kiểu CSS như font-family:arial,helvicta,sans-serif. Khi tôi kiểm tra nó trong trình duyệt, tôi không biết nó đang sử dụng phông chữ nào từ họ phông chữ. Tôi muốn biết chính xác phông chữ được trình duyệt sử dụng để hiển thị. Trong trường hợp này là trình duyệt sử dụng Arial hoặc Helvicta hoặc sans-serif cho văn bản tôi đã hiển thị.
Tôi đã kiểm tra bằng cách đặt cái này trong Wordpad nhưng nó đang lấy phông chữ hệ thống mặc định của tôi.
Câu trả lời:
Bạn muốn bổ trợ Trình tìm phông chữ cho Firefox:
https://addons.mozilla.org/en-US/firefox/addon/4415/
Cho phép bạn nhấp vào một số văn bản trên trang web và hiển thị cho bạn thông tin phông chữ cho văn bản đó - bao gồm phông chữ nào đã được chọn từ gia đình.
Tôi đã sử dụng nó từ lâu và nó rất hữu ích.
Đây là một tài liệu HTML nhỏ mà tôi đã viết sử dụng jQuery để tạo tập lệnh đoán phông chữ để sử dụng trên trang web của bạn:
<html>
<head>
<title>Font Guesser</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<script type="text/javascript">
/*
If you encounter two fonts which have the same results
try changing the fontTestString value
...
NOTE: Ensure that there are no CSS directives which
affect generic SPAN tags on your final site which are
not also applied to this font guesser script generator
*/
var fontTestString = 'AABCCDEEFGGHIIJmmmmwwww';
function fontFamiliesTest( valString ) {
$('#results').html( ' ' );
$('#yourJavascript').html( ' ' );
if ( ! valString ) {
alert( 'Please enter a font-family declaration' );
return false;
} else {
var fontFamilies = new Array();
fontFamilies = valString.split(',');
for ( var i = 0; i < fontFamilies.length; i++ ) {
$('#results').append( '<h2>' + fontFamilies[i] + '</h2><span class="baseLine" style="font-family:' + fontFamilies[i] + ';">' + fontTestString + '</span>');
}
$('#yourJavascript').append('<h2>Your jQuery font test script:</h2><form><textarea id="jQ" style="width:100%;height:500px;"></textarea></form>');
$('#jQ').append('<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>' );
$('#jQ').append("\r\n" + '<script type="text/javascript">' );
$('#jQ').append("\r\n" + ' var usedFont = "";' );
$('#jQ').append("\r\n" + ' $(document).ready( function() {');
$('#jQ').append("\r\n" + ' $(\'body\').append(\'<div id="testFontWrapper" style="position:absolute;bottom:0;height:1px;width:1px;">\');');
$('#jQ').append("\r\n" + ' $(\'body\').append(\'<span id="testFont" style="display:inline;font-size:100px;">' + fontTestString + '</span></div>\');');
$('.baseLine').each(function() {
$('#jQ').append("\r\n" + ' if ( $(\'#testFont\').width() == ' + $(this).width() + ' ) usedFont = "' + $(this).css('font-family') + '";');
});
$('#jQ').append("\r\n" + ' alert(\'Used font appears to be:\' + usedFont );');
$('#jQ').append("\r\n" + ' });');
$('#jQ').append("\r\n" + '</script>' );
}
}
$(document).ready( function() {
$('#testForm').click(function() {
fontFamiliesTest( $('#fontFamily').val() );
});
});
</script>
<style type="text/css">
.baseLine {
font-size:100px !important;
}
</style>
</head>
<body>
<noscript>
<h1>Javascript Required</h1>
</noscript>
<p>Please enter the font-family declaration you would like to test fonts against:</p>
<form>
<input type="text" name="fontFamily" id="fontFamily" value="'Comic Sans',Arial,monospace" />
<input type="button" id="testForm" value="Go »" />
</form>
<div id="results"> </div>
<div id="yourJavascript"> </div>
</body>
</html>Kịch bản sử dụng đặc tính chiều rộng của fontTestStringmỗi phông chữ ở độ cao 100px để xác định phông chữ nào được sử dụng trên trang web.
Không co cach nao để biêt được. Nhưng nó không quan trọng. Một thiết kế đúng sẽ hiển thị đúng và có thể sử dụng được bất kể phông chữ mà hệ thống của người dùng sử dụng. Tôi sẽ không lo lắng về điều này.
Cách thức hoạt động của họ phông chữ là nó sẽ kiểm tra hệ thống cho phông chữ đầu tiên trong danh sách. Nếu nó có mặt, nó sẽ sử dụng nó. Nếu không, nó sẽ tiến hành tiếp theo. Vì vậy, nếu bạn đã cài đặt phông chữ đầu tiên, nó sẽ sử dụng phông chữ đó. Điều này thường được gọi là ngăn xếp phông chữ vì bạn bắt đầu ở trên cùng và làm việc theo cách của bạn xuống nếu cần.
Lưu trang web của bạn bằng HTML, sau đó thay đổi thứ tự các phông chữ trong css và xem các bản sao của trang trong trình duyệt.