Как указать шрифт из JavaScript? - PullRequest
Новая
       35

Как указать шрифт из JavaScript?

1 голос
/ 01 апреля 2012

Я пытаюсь настроить букмарклет view-src для iPad. Этот выглядит довольно хорошо до сих пор.

Но я хочу сделать его чуть более читабельным: шрифт Courier (New) немного уродлив даже (особенно?) На дисплее сетчатки, и я бы предпочел любой из DejaVu Sans Mono, Monaco, Lucida Console, Битстрим Вера без Моно.

Я попытался изменить скрипт bookmarklet, добавив: 

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

Это не сработало.

Возможно, prettyprint отменяет мои настройки fontFamily при загрузке.Может быть, я могу установить его в конце сценария как-то ...

Ответы [ 4 ]

3 голосов
/ 01 апреля 2012

это потому, что Lucida Console, dejaVu sans mono и Monaco изначально недоступны на ipad.Если вы не добавили их как Webfont , это не окажет абсолютно никакого влияния на устройство IOS.вот список родных шрифтов ipad: http://iosfonts.com/

1 голос
/ 01 апреля 2012

Вот версия, которую я сейчас использую, это букмарклет Фрэнка Фидлера, слегка измененный, чтобы установить <pre> для полужирного шрифта и с использованием «солнечного взрыва» prettify 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

1 голос
/ 01 апреля 2012

К сожалению, единственный моноширинный шрифт, доступный на iOS, это Courier (и, я полагаю, Courier New).Вам придется идти с:pre.style.fontFamily = '"Courier New", Courier, mono';

0 голосов
/ 01 апреля 2012

Вы можете использовать 

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

О проблеме с iPad, пробовали ли вы шрифты Google?

http://www.google.com/webfonts

С их сайта:

Какие браузеры поддерживаются?

API веб-шрифтов Google совместим со следующими браузерами:

Google Chrome: версия 4.249.4 +

Mozilla Firefox: версия: 3.5 +

Apple Safari: версия 3.1 +

Opera: версия 10.5 +

Microsoft Internet Explorer: версия 6 +

Работает ли API веб-шрифтов Google на мобильных устройствах?

API веб-шрифтов Google надежно работает в подавляющем большинстве современных мобильных операционных систем, включая Android 2.2+ и iOS 4.2+ (iPhone, iPad, iPod). Поддержка более ранних версий iOS ограничена.

...