So finden Sie die genaue Schriftart, die vom Browser verwendet wird

7

Ich habe das CSS-Stylesheet als verwendet font-family:arial,helvicta,sans-serif. Als ich es im Browser überprüft habe, weiß ich nicht, welche Schriftart es aus der Schriftfamilie verwendet. Ich möchte die genaue Schriftart kennen, die vom Browser für die Anzeige verwendet wird. In diesem Fall verwendet der Browser Arial oder Helvicta oder serifenlos für den angezeigten Text.

Ich habe dies überprüft, indem ich dies in Wordpad eingefügt habe, aber es wird meine Standardsystemschriftart verwendet.

css fonts browsers Stephen Ostermiller
quelle

Antworten:

4

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.

Steve Claridge
quelle
2

Hier ist ein kleines HTML-Dokument, das ich geschrieben habe und das jQuery verwendet, um ein Skript zum Erraten von Schriftarten für die Verwendung auf Ihrer 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 die Breitenmerkmale von fontTestStringfür jede Schriftart in einer Höhe von 100 Pixel, um zu bestimmen, welche Schriftart auf der Site verwendet wird.

danlefree
quelle
1

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

John Conde
quelle
+1 Diese Antwort ist technisch korrekt, da nicht alle benutzerdefinierten CSS-Deklarationen berücksichtigt werden können. Es ist jedoch möglich, eine Lösung zu erstellen, die für 99% der Kunden funktioniert, die das Material anzeigen.
Danlefree
Ein Beispiel dafür finden Sie hier: lalit.org/lab/javascript-css-font-detect
John Conde
Hrm ... hätte etwas ausführlicher suchen sollen, bevor ich versucht habe, das Rad neu zu erfinden ...
danlefree
Ich wusste nicht, dass Sie einen Code-Ausschnitt gepostet hatten. Basierend auf dem, was diese Webseite sagt, scheinen Sie dieselbe Technik wie sie zu verwenden, also haben Sie zumindest bestätigt, dass diese Technik der richtige Weg ist.
John Conde
Ich denke ihr lest zu viel in die Frage hinein. Ziemlich sicher, dass Sreekanth nur wissen möchte, welche Schriftart der Browser ausgewählt hat, als er seine eigene Website angesehen hat.
DisgruntledGoat
1

Die Funktionsweise der Schriftfamilie besteht darin, dass das System auf die erste Schrift in der Liste überprüft 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 oft als Schriftstapel bezeichnet, da Sie oben beginnen und sich bei Bedarf nach unten arbeiten.

Virtuosi Media
quelle
0

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.

John Fro
quelle
1
Dies ist keine sehr hilfreiche Antwort.
John Conde