Skip to content Skip to sidebar Skip to footer
Home / Css / Fonts / Ios / Javascript / Mobile Safari

How To Specify A Font From Javascript?

Post a Comment
I am trying to customize a view-src bookmarklet for iPad. This one is looking pretty good so far. But I want to make it just a little more readable: The Courier (New) font is a bi

Solution 1:

this is because Lucida Console, dejaVu sans mono and Monaco are no avaiible natively on the ipad. Unless you have added them as Webfont, this will have absolutely no effect on a IOS device. here is a list of the ipad native fonts: http://iosfonts.com/

Solution 2:

Unfortunately, the only monospace font available on iOS is Courier (and Courier New, I believe). You'll have to go with: pre.style.fontFamily = '"Courier New", Courier, mono';

Solution 3:

You can use 

element.style.fontFamily = "Fontname1,alternative1,alternative2";

About the iPad problem, have you tried Google fonts?

http://www.google.com/webfonts

From their site:

What browsers are supported?

The Google Web Fonts API is compatible with the following browsers:

Google Chrome: version 4.249.4+

Mozilla Firefox: version: 3.5+

Apple Safari: version 3.1+

Opera: version 10.5+

Microsoft Internet Explorer: version 6+

Does the Google Web Fonts API work on mobile devices?

The Google Web Fonts API works reliably on the vast majority of modern mobile operating systems, including Android 2.2+ and iOS 4.2+ (iPhone, iPad, iPod). Support for earlier iOS versions is limited.

Solution 4:

Here is the version I am using now, it's Frank Fiedler's bookmarklet, slightly modified to set the <pre> to bold and using the "sunburst" prettify CSS rather than the default one. 

javascript:(function(){
  var w = window.open('about:blank'),
  doc = w.document;
  doc.write('<!DOCTYPE html><html><head><title>Source of ' + location.href +
    '</title><meta name=\'viewport\' content=\'width=device-width\' />' +
    '<link rel=\'stylesheet\''+
    ' href=\'http://google-code-prettify.googlecode.com/svn/trunk/styles/sunburst.css\''+
    ' type=\'text/css\'/>' +
    '</head><body></body></html>');
  doc.close();
  var pre = doc.body.appendChild(doc.createElement('pre'));
  pre.style.overflow = 'auto';
  pre.style.whiteSpace = 'pre-wrap';
  pre.style.border = 'none';
  pre.style.fontWeight = 'bold';
  pre.className = 'prettyprint';
  pre.appendChild(doc.createTextNode(document.documentElement.innerHTML));
  var lib = doc.createElement('script');
  lib.setAttribute('type','text/javascript');
  lib.setAttribute('src','http://google-code-prettify.googlecode.com/svn/trunk/src/prettify.js');
  doc.getElementsByTagName('head')[0].appendChild(lib);
  var call = doc.createElement('script');
  call.setAttribute('type','text/javascript');
  var txt = doc.createTextNode('window.setTimeout(function () {prettyPrint();},800);');
  call.appendChild(txt);
  doc.body.appendChild(call);  
}());

looks pretty pro:

enter image description here

Post a Comment for "How To Specify A Font From Javascript?"