How to specify a font from javascript?

问题

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 bit ugly even (especially?) on the retina display and I'd prefer any one of DejaVu Sans Mono, Monaco, Lucida Console, Bitstream Vera Sans Mono.

I tried to modify the bookmarklet script by adding:

pre.style.fontFamily = '"DejaVu Sans Mono", "Lucida Console", Monaco;';

It's not doing the trick.

Perhaps prettyprint cancels out my fontFamily setting when it loads. Maybe I can set it at the end of the script somehow...

回答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/

回答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';

回答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.

回答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:

来源：https://stackoverflow.com/questions/9966382/how-to-specify-a-font-from-javascript

标签

javascript

css

ios

fonts

mobile-safari