如何从JavaScript指定字体？

我想为iPad定制一个view-src书签。 This one目前看起来不错。如何从JavaScript指定字体？

但我想让它更具可读性：在视网膜显示器上，Courier（New）字体甚至有点丑陋（尤其是？），我更喜欢DejaVu Sans Mono，Monaco，Lucida Console，Bitstream Vera Sans Mono。

我试图通过添加修改书签脚本：

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

它不这样做的伎俩。

也许prettyprint当它加载时取消我的fontFamily设置。也许我可以设置它在脚本的末尾莫名其妙...

来源

2012-04-01 Steven Lu

我不知道，但iPad的任何这种字体？ – rcdmk 2012-04-01 17:13:37

是的。事实证明，这些伟大的字体都没有包括在内，我在一些应用程序中看到了它们（如Textastic），但它们不适用于MobileSafari。我选择简单地将Courier设置为粗体，至少可以更容易地看到颜色。 – 2012-04-01 18:10:52

这是因为Lucida控制台，dejaVu无单声道和摩纳哥是无法原生在ipad上。除非您将它们添加为Webfont，否则这对IOS设备完全没有影响。这里是一个ipad原生字体列表：http://iosfonts.com/

来源

2012-04-01 17:15:08 meo

垃圾。哪些是等宽的？ – 2012-04-01 17:16:37

'pre.style.fontFamily ='mono';'应该做到这一点。 – 2012-04-01 17:17:55

尝试Andale Mono：http://daringfireball.net/misc/2007/07/iphone-osx-fonts – meo 2012-04-01 17:18:49

不幸的是，iOS上唯一可用的等宽字体是Courier（和Courier New，我相信）。你必须有去：
pre.style.fontFamily = '"Courier New", Courier, mono';

来源

2012-04-01 17:25:24

您可以使用

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

关于iPad的问题，你有没有尝试过谷歌的字体？

http://www.google.com/webfonts

从他们的网站：

支持哪些浏览器？

的谷歌的Web字体API是与以下浏览器兼容：

谷歌浏览器：版本4.249.4+

Mozilla Firefox浏览器：版本：3.5+

苹果Safari浏览器：3.1+版

歌剧院：1050 +版本

的Microsoft Internet Explorer：版本6+

Google Web Fonts API可以在移动设备上使用吗？

Google Web Fonts API在绝大多数现代移动操作系统（包括Android 2.2+和iOS 4.2+（iPhone，iPad，iPod））上可靠运行。对早期iOS版本的支持有限。

来源

2012-04-01 17:34:24 Yohann

不确定为什么你被downvoted。那么，谷歌字体没有我喜欢的字体，但这让我搜索，也许我可以用@ font-face莫名其妙。或SVG字体。 – 2012-04-01 17:41:09

我也不确定。如果你的项目只针对css3浏览器，那么@ font-face是很棒的。所以，如果你打算扩展到ie6 +和其他浏览器的旧版本会更难，否则@ font-face是伟大的。你可能也想阅读这篇文章（不是我的博客，只是碰到它）上的SVG字体。 http://jeremie.patonnier.net/post/2011/02/07/Why-are-SVG-Fonts-so-different – Yohann 2012-04-01 17:58:07

@Yohann font-face是CSS2的作品，因为ie4 + ... – meo 2012-04-01 19:29:12

这是我现在使用的版本，这是弗兰克·菲德勒的书签，稍加修改设置<pre>以大胆使用“旭日”美化CSS，而不是默认的。

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); 
}());

小艾亲：

enter image description here

来源

2012-04-01 18:39:15

如何从JavaScript指定字体？

回答

相关问题