如何从javascript指定字体？答案

【问题标题】：How to specify a font from javascript?如何从javascript指定字体？
【发布时间】：2012-04-01 17:09:39
【问题描述】：

我正在尝试为 iPad 自定义 view-src 书签。 This one 到目前为止看起来还不错。

但我想让它更具可读性：Courier（新）字体在视网膜显示器上甚至（尤其是？）有点难看，我更喜欢 DejaVu Sans Mono、Monaco、Lucida Console 中的任何一种，比特流维拉无单声道。

我尝试通过添加以下内容来修改书签脚本：

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

这不是诀窍。

也许 prettyprint 在加载时取消了我的 fontFamily 设置。也许我可以以某种方式将它设置在脚本的末尾......

【问题讨论】：

我不确定，但 iPad 有这些字体吗？
没错。原来这些伟大的字体都不包括在内，我在我拥有的一些应用程序（如 Textastic）中看到了它们，但它们不适用于 MobileSafari。我选择简单地将 Courier 设置为粗体，这样至少更容易看到颜色。

标签： javascript css ios fonts mobile-safari

【解决方案1】：

这是因为 Lucida Console、dejaVu sans mono 和 Monaco 在 ipad 上原生不可用。除非您将它们添加为Webfont，否则这对 IOS 设备绝对没有影响。这里是 ipad 原生字体的列表：http://iosfonts.com/

【讨论】：

废话。其中哪些是等空间的？
pre.style.fontFamily = 'mono'; 应该可以做到这一点。
@meo 我很想做一个 css 解决方案，但我认为这是不可能的，因为我正在处理一个小书签。即能够使用这段代码在我想要的任何网站上查看 src。所以都是客户端js。
@Steven Lu。好的，然后选择“Andale Mono”或 Courier
很奇怪。我在 5.1（新 iPad）上并在我的 ipad 中打开 daringfireball.net 链接显示它使用 Times 绘制 Andale Mono。摩纳哥似乎不是时代，但也绝对不是摩纳哥。

【解决方案2】：

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

【讨论】：

【解决方案3】：

你可以使用

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

关于iPad问题，你试过谷歌字体吗？

http://www.google.com/webfonts

来自他们的网站：

支持哪些浏览器？

Google Web Fonts API 与以下浏览器兼容：

谷歌浏览器：版本 4.249.4+

Mozilla Firefox：版本：3.5+

Apple Safari：版本 3.1+

Opera：版本 10.5+

Microsoft Internet Explorer：版本 6+

Google Web Fonts API 是否适用于移动设备？

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

【讨论】：

不知道为什么你被否决了。好吧，谷歌字体没有我喜欢的字体，但这让我开始搜索，也许我可以以某种方式使用@font-face。或 SVG 字体。
我也不确定。如果您的项目仅针对 css3 浏览器，那么 @ font-face 非常棒。因此，如果您打算扩展到 ie6+ 和其他浏览器的旧版本，它会变得更加困难，否则 @ font-face 很棒。您可能还想阅读有关 svg 字体的这篇文章（不是我的博客，只是偶然发现的）。 jeremie.patonnier.net/post/2011/02/07/…
抱歉，我查看了 w3.org 网站，他们在 css3 w3.org/TR/2002/WD-css3-webfonts-20020802/#font-descriptions 下提到了它，甚至 w3schools.com 也有 w3schools.com/cssref/css3_pr_font-face_rule.asp 我想我在 font-face 上看到了一篇 css2 文章但我想它在 css2 中已被弃用并在 css3 中重新引入。我不太确定实际情况如何，但知道这将是一件好事！

【解决方案4】：

这是我现在使用的版本，它是 Frank Fiedler 的书签，稍作修改以将 <pre> 设置为粗体并使用“sunburst”美化 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);  
}());

看起来很专业：

【讨论】：