Сделать весь текст шрифтом Helvetica иметь шрифт Arial в jQuery

Question

Мне нужна магия jQuery, которая будет искать весь текст на странице с заданным шрифтом (скажем Helvetica) и изменять шрифт только этого текста на что-то другое (скажем, Arial).

Answer 1

Это должно работать, я проверил его на своем сайте, и он правильно изменил шрифт.

$('body').filter(function() {
    return ( $(this).css('font-family').indexOf('Helvetica')>-1);
}).css('font-family', 'Arial');

Answer 2

Это не совсем ответ, но, поскольку я пока не могу комментировать ответы других людей, я размещаю свои комментарии здесь в ответе.

Ответ мыслителя выше не будет работать (или, по крайней мере, в некоторых случаях он не будет работать).

Код мыслителя выглядит следующим образом (я копирую его здесь на случай, если он сможет отредактировать свой ответ):

$('body').filter(function() {
return ( $(this).css('font-family').indexOf('Helvetica')>-1);
}).css('font-family', 'Arial');

Этот код будет изменять шрифт Arial для любого семейства шрифтов, которое содержит Helvetica. Это относится и к семействам шрифтов, в которых Helvetica используется в качестве запасного варианта, и поэтому весьма вероятно, что они не всегда отображаются.

Вы также можете прочитать ответы и комментарии в следующем посте:

Изменение размера шрифта тела на основе семейства шрифтов с помощью jQuery

, который содержит аналогичный код вместе с обсуждением.

Answer 3

Это то, что я использую в своем расширении Google Chrome:

var replacement = "Helvetica";
var toReplace = new RegExp("[\\'\\\"\\s]*(Arial|Some|Other|Fonts)[\\'\\\"\\s]*(?=,|$)", "gi");

function replaceFont (toReplace, replacement) {
    // Adjust style sheets
    if (document.styleSheets) {
        for (var i = 0; i < document.styleSheets.length; i++) {
            var styleSheet = document.styleSheets[i];

            if (styleSheet.cssRules) {
                for (var j = 0; j < styleSheet.cssRules.length; j++) {
                    var cssRule = styleSheet.cssRules[j];

                    // Replace in font-family attribute
                    if (cssRule.style.fontFamily.match(toReplace))
                        cssRule.style.fontFamily = cssRule.style.fontFamily.replace(toReplace, replacement);

                    // Replace in font attribute
                    if (cssRule.style.font.match(toReplace))
                        cssRule.style.font = cssRule.style.font.replace(toReplace, replacement);
                }
            }
        }
    }

    // Adjust inline styles
    $('body').find('*').each(
        function (i) {
            if ($(this).css('font-family').match(toReplace))
                $(this).css('font-family', $(this).css('font-family').replace(toReplace, replacement));

            if ($(this).css('font').match(toReplace))
                $(this).css('font', $(this).css('font').replace(toReplace, replacement));
        }
    );

    // Adjust font tag properties
    $('body').find('font').each(
        function (i) {
            if ($(this).attr('face').match(toReplace))
                $(this).attr('face', $(this).attr('face').replace(toReplace, replacement));
        }
    );

}

Полный код здесь .

Answer 4

Если бы все было определено с помощью CSS, вы когда-нибудь задумывались о том, чтобы создать свои собственные @font-face определения, переопределяющие Helvetica?

Например, если все определено для рендеринга в Helvetica, как в этом выражении:

* {

    font-family: Helvetica;

}

Затем вы можете добавить оператор @ font-face к вашей таблице стилей, который теперь будет выглядеть следующим образом:

@font-face {

    font-family: 'Helvetica';

    src:    local('Anivers-Regular'),
        local('Anivers Regular'),
        url('typeface.Anivers.Regular.otf') format('truetype');

}

Работает и с элементами в виде строки, такими как <h4 style="font-family: Helvetica;">aw</h4>.

Таким образом, все Helvetica будет автоматически визуализироваться в (например,) Anivers, и этот фрагмент работает с двойными кавычками или без них. Укажите имя PostScript, полное имя + стиль, затем URI для кросс-браузерной совместимости. Если запасной вариант на Helvetica, эта магия CSS будет работать. Кроме того, таким образом вы получаете бесплатное снижение производительности, поскольку браузер вместо вашего скрипта заменяет вас.

К сожалению, Internet Explorer ненавидит файлы .otf без видимой причины, и на всякий случай вам понадобится утилита ttf2eot.

-

Это ужасный хак, который слишком долго будет жить в вашем рабочем коде.

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

Если вы позже передумали и хотите использовать «настоящую» Helvetica где-то в другом месте, вам придётся швырнуть её под другим именем. Утомительная работа, не правда ли?