Как определить, какой из указанных шрифтов был использован на веб-странице?

Для сценариев на стороне сервера нет PHP, но nodeJS ...

Облачные функции Google написаны на JavaScript и выполняются в runtime времени Node.js.

blockquote>

Mandrill также поддерживает узел JS и имеет API-интерфейс Webhooks API . Поэтому можно потребовать, чтобы модуль узла в этих «облачных функциях» и «веб-крючках» ... и затем отправлял с ними HTML-форму.

Там должно быть несколько HTTP облачных функций, определенных в Firebase Console, чтобы позволить им подписываться, отписываться и управлять своими подписками. Можно даже создать разметку HTML для входной формы с облачными функциями, а затем прикрепить ее. В качестве примера не проверены и не включены никакие гарантии:

const functions = require('firebase-functions');
const mandrill = require('mandrill-api/mandrill');
var client = new mandrill.Mandrill('YOUR_API_KEY');

/* TODO: add the user on Firebase, respond through the API */
exports.user_add = functions.https.onRequest((req, res) => {

});

/* TODO: change subscription settings on Firebase, respond through the API */
exports.user_edit = functions.https.onRequest((req, res) => {

});

/* TODO: remove the user on Firebase, respond through the API */
exports.user_remove = functions.https.onRequest((req, res) => {

});

/* optional: generate the HTML markup of the form, send HTTP response */
exports.markup = functions.https.onRequest((req, res) => {

});

Можно связать события Firebase Auth , чтобы сохранить две пользовательские базы данных в синхронной (это не требуемый для Mandrill, но требуемый для MailChimp - независимо от того, использует ли он оболочку PHP или nodeJS):

exports.on_user_create = functions.auth.user().onCreate(event => {
   const user = event.data;
});

exports.on_user_delete = functions.auth.user().onDelete(event => {
   const user = event.data;
});

Firebase on Websites объясняет это, в то время как есть локальная Эмулятор для функций облака.

132
задан Nandini Venkateshan 2 January 2019 в 19:19
поделиться

3 ответа

Я видел сделанный своего рода сомнительным, но довольно надежным способом. В основном элемент установлен использовать определенный шрифт, и строка установлена на тот элемент. Если набор шрифтов для элемента не существует, он берет шрифт родительского элемента. Так, что они делают измерить ширину представленной строки. Если это соответствует тому, что они ожидали для желаемого шрифта в противоположность производному шрифту, это присутствует. Это не будет работать на моноширинные шрифты.

Вот то, куда это прибыло из: Детектор Шрифта Javascript/CSS (ajaxian.com; 12 марта 2007)

69
ответ дан 24 November 2019 в 00:12
поделиться

Техника, которая работы должны посмотреть на вычисленный стиль элемента. Это поддерживается в Opera и Firefox (и я повторно подставляю в сафари, но не протестировал). IE (7, по крайней мере), предоставляет метод для получения стиля, но это, кажется, то независимо от того, что было в таблице стилей, не вычисленном стиле. Больше деталей о quirksmode: Получите Стили

Вот простая функция для захвата шрифта, используемого в элементе:

/**
 * Get the font used for a given element
 * @argument {HTMLElement} the element to check font for
 * @returns {string} The name of the used font or null if font could not be detected
 */
function getFontForElement(ele) {
    if (ele.currentStyle) { // sort of, but not really, works in IE
        return ele.currentStyle["fontFamily"];
    } else if (document.defaultView) { // works in Opera and FF
        return document.defaultView.getComputedStyle(ele,null).getPropertyValue("font-family");
    } else {
        return null;
    }
}

Если правило CSS для этого было:

#fonttester {
    font-family: sans-serif, arial, helvetica;
}

Затем это должно возвратить helvetica, если это установлено, в противном случае ареал, и наконец, название шрифта гротескового шрифта системного значения по умолчанию. Обратите внимание, что упорядочивание шрифтов в Вашем объявлении CSS является значительным.

Интересный взлом, который Вы могли также попробовать, должен создать много скрытых элементов с большим количеством различных шрифтов, чтобы попытаться обнаружить, какие шрифты установлены на машине. Я уверен, что кто-то мог сделать изящную сборочную страницу статистики шрифта с этой техникой.

9
ответ дан 24 November 2019 в 00:12
поделиться

@pat Actually, Safari does not give the font used, Safari instead always returns the first font in the stack regardless of whether it is installed, at least in my experience.

font-family: "my fake font", helvetica, san-serif;

Assuming Helvetica is the one installed/used, you'll get:

  • "my fake font" in Safari (and I believe other webkit browsers).
  • "my fake font, helvetica, san-serif" in Gecko browsers and IE.
  • "helvetica" in Opera 9, though I read that they are changing this in Opera 10 to match Gecko.

I took a pass at this problem and created Font Unstack, which tests each font in a stack and returns the first installed one only. It uses the trick that @MojoFilter mentions, but only returns the first one if multiple are installed. Though it does suffer from the weakness that @tlrobinson mentions (Windows will substitute Arial for Helvetica silently and report that Helvetica is installed), it otherwise works well.

10
ответ дан 24 November 2019 в 00:12
поделиться
Другие вопросы по тегам:

Похожие вопросы: