it-swarm.com.de

So finden Sie die genaue vom Browser verwendete Schriftart

Ich habe das CSS-Stylesheet als font-family:arial,helvicta,sans-serif verwendet. Als ich es im Browser eingecheckt habe, weiß ich nicht, welche Schriftart es aus der Schriftfamilie verwendet. Ich möchte genau wissen, welche Schriftart der Browser für die Anzeige verwendet. In diesem Fall verwendet der Browser Arial oder Helvicta oder Sans-Serif für den angezeigten Text.

Ich habe dies in Wordpad überprüft, aber es verwendet meine Standardsystemschriftart.

7
sreekanth

Sie möchten das Font Finder-Add-On für Firefox:

https://addons.mozilla.org/en-US/firefox/addon/4415/

Hiermit können Sie auf einen Text auf einer Webseite klicken und die Schriftartinformationen für diesen Text anzeigen - einschließlich der Schriftart, die aus der Familie ausgewählt wurde.

Ich benutze es seit Ewigkeiten und es ist sehr nützlich.

4
Steve Claridge

Hier ist ein kleines HTML-Dokument, das ich geschrieben habe und das jQuery verwendet, um ein Skript zum Erraten von Schriftarten für Ihre Website zu generieren :

<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( '&nbsp;' );
  $('#yourJavascript').html( '&nbsp;' );
  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('&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"&gt;&lt;/script&gt;' );
    $('#jQ').append("\r\n" + '&lt;script type="text/javascript"&gt;' );
    $('#jQ').append("\r\n" + '  var usedFont = "";' );
    $('#jQ').append("\r\n" + '  $(document).ready( function() {');
    $('#jQ').append("\r\n" + '    $(\'body\').append(\'&lt;div id="testFontWrapper" style="position:absolute;bottom:0;height:1px;width:1px;"&gt;\');');
    $('#jQ').append("\r\n" + '    $(\'body\').append(\'&lt;span id="testFont" style="display:inline;font-size:100px;"&gt;' + fontTestString + '&lt;/span&gt;&lt;/div&gt;\');');
    $('.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" + '&lt;/script&gt;' );
  }
}
$(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 &raquo;" />
</form>
<div id="results">&nbsp;</div>
<div id="yourJavascript">&nbsp;</div>
</body>
</html>

Das Skript verwendet das Breitenmerkmal von fontTestString für jede Schriftart in einer Höhe von 100 Pixel, um zu bestimmen, welche Schriftart auf der Site verwendet wird.

2
danlefree

Es gibt keine Möglichkeit zu wissen. Aber es sollte keine Rolle spielen. Ein ordnungsgemäß entworfenes Element wird ordnungsgemäß gerendert und kann unabhängig von der vom System des Benutzers verwendeten Schriftart verwendet werden. Ich würde mir darüber keine Sorgen machen.

1
John Conde

Die Funktionsweise der Schriftfamilie besteht darin, dass das System nach der ersten Schrift in der Liste durchsucht wird. Wenn es vorhanden ist, wird es das verwenden. Wenn nicht, wird mit dem nächsten fortgefahren. Wenn Sie also die erste Schriftart installiert haben, wird diese Schriftart verwendet. Dies wird häufig als Zeichensatzstapel bezeichnet, da Sie oben beginnen und bei Bedarf nach unten arbeiten.

1
Virtuosi Media

Verwenden Sie WhatFont aus dem Chrome Web Store.

1
Gaia

Speichern Sie Ihre Webseite in HTML, ändern Sie dann die Reihenfolge der Schriftarten im CSS und sehen Sie sich Kopien der Seite im Browser an.

0
John Fro