gabriel / font-detect-js

Font detection using Javascript and Flash

font-detect-js / index.html
100644 57 lines (46 sloc) 2.12 kb
raw blame history 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

<html>
<head>
  <title>Font Detect</title>
  <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.5.2/build/reset/reset-min.css"> 
  <link rel="stylesheet" type="text/css" href="stylesheets/font-detect.css" />  
  <link rel="stylesheet" type="text/css" media="print" href="stylesheets/font-detect-print.css" />
</head>
<body>
  
  <div id="content">            
    <div class="noprint">
      <p id="status"><span>Checking Flash version...</span> &#151; <a href="edit.html">Edit</a></p>
    </div>
  </div>
 
  <div id="font-detect-swf"></div>
  
  <script src="javascripts/jquery-1.2.6.pack.js"></script>
  <script src="javascripts/swfobject.js"></script>
  <script src="javascripts/font-detect.js"></script>  
  <script>
    $(document).ready(function() {
      
      // Check Flash version
      if (!swfobject.hasFlashPlayerVersion("9.0.0"))
        $("#status span").html("You don't have a compatible version of Flash installed?");
      else
        $("#status span").html("Loading... (this may beach ball your browser for ~10 seconds)")
      
        var fontDetect = new FontDetect("font-detect-swf", "flash/FontList.swf", function(fd) {        
          var fonts = fd.fonts();
            
          $("#status span").html("Loaded " + fonts.length + " fonts");
        
          var text = "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.";
          var size = "32px";
        
          for(var i = 0; i < fonts.length; i++) {
            var node = document.createElement("p");        
            $(node).css("font-family", "'" + fonts[i].fontName + "'");
            $(node).css("font-size", size);
            $(node).addClass("sample-text");
            $(node).html(text);
            $("#content").append(node);
 
            var nameNode = document.createElement("p");
            $(nameNode).addClass("sample-text-name");
            $(nameNode).html("[" + fonts[i].fontName + "]");
            $("#content").append(nameNode);
          }
      });
      
    });    
    
  </script>
</body>
</html>