Заставить Chrome использовать мой предпочтительный шрифт вместо авторского

Вопрос или проблема

Я часто сижу в интернете, и иногда меня утомляет тип шрифта.
Я хотел бы выбрать свой собственный шрифт для отображения веб-страниц, чтобы он имел приоритет над шрифтом сайта. Я использую Chrome и получил доступ к:
настройки=> Показать дополнительные настройки… =>Веб-контент=>Настроить шрифты
Это работает только тогда, когда сайт не указал шрифт.
Это не с точки зрения веб-разработчика, это наоборот.

Мне довольно комфортно с расширением Chrome под названием “Режим чтения”, оно очень читаемое. Недостаток — неправильное отображение цитируемого текста.
Поэтому я продолжаю использовать его, пока не найду лучшую альтернативу.

Редактировать:
Нашел еще одно, это закладка на JavaScript, вставьте следующую строку в адресную строку (где вы вводите адреса сайтов, например www.site.com) и нажмите ENTER :

    javascript:Array.prototype.forEach.call(document.getElementsByTagName("*"),
function(e){e.style.fontFamily ="Source Sans Pro"})

Замените Source Sans Pro на ваш предпочитаемый шрифт.

Если вы не хотите вводить это каждый раз, добавьте в закладки и нажимайте на него, когда хотите изменить шрифт.

Я улучшил принятный ответ, создав скрипт TamperMonkey, чтобы он применялся по умолчанию ко всем сайтам:

// ==UserScript==
// @name         Принудительный шрифт
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Устанавливает шрифт на всех веб-сайтах на Consolas
// @author       Вы
// @match        *://*/*
// @icon         https://e7.pngegg.com/pngimages/656/766/png-clipart-computer-terminal-computer-icons-bash-others-miscellaneous-angle.png
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    Array.prototype.forEach.call(document.getElementsByTagName("*"), function(e){e.style.fontFamily ="Consolas"})
})();

Я использую Force Font. Он не полностью работает для многих сайтов Google, но стоит попробовать, так как для всех остальных сайтов, которые я использую, он работает.

Вариант TamperMonkey с фиксированным шрифтом для тегов ‘pre’ и ‘code’, в то время как остальные получают пропорциональный шрифт

// ==UserScript==
// @name         Принудительный шрифт
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Устанавливает шрифт на всех веб-сайтах на Consolas
// @author       Вы
// @match        *://*/*
// @icon         https://e7.pngegg.com/pngimages/656/766/png-clipart-computer-terminal-computer-icons-bash-others-miscellaneous-angle.png
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    Array.prototype.forEach.call(
        document.getElementsByTagName("*"),
        function(e){
            if (e.parentNode && (e.parentNode.tagName === "PRE" || 
                                 e.parentNode.tagName === "CODE")) {
                return
            }
            if (e.tagName === "PRE" || e.tagName === "CODE") {
                e.style.fontFamily = 'Go Mono'
            } else {
                e.style.fontFamily = 'Go Medium'
            }
        })
})();

Я знаю, что это уже старое, но:

// ==UserScript==
// @name         Принудительный шрифт
// @namespace    http://tampermonkey.net/
// @version      0.2
// @description  Устанавливает шрифт на всех веб-сайтах на YourFontnameHERE и переопределяет любые стили сайта
// @author       Вы
// @match        *://*/*
// @icon         https://e7.pngegg.com/pngimages/656/766/png-clipart-computer-terminal-computer-icons-bash-others-miscellaneous-angle.png
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Определите ваш предпочитаемый шрифт
    const preferredFont="YourFontnameHERE";

    // Создайте элемент стиля
    const style = document.createElement('style');
    style.type="text/css";
    style.textContent = `
        * {
            font-family: ${preferredFont} !important;
        }
    `;

    // Добавьте элемент стиля в заголовок документа
    document.head.appendChild(style);
})();

Это исправляет ситуацию, и если YourFontnamHERE — это собственный шрифт, вы можете встроить его в скрипт, используя правило @font-face:

style.textContent = `
    @font-face {
        font-family: 'YourFontnamHERE';
        src: url('path/to/digicode-font.woff2') format('woff2'); /* Обновите с фактическим путем к шрифту */
    }
    * {
        font-family: 'YourFontnamHERE' !important;
    }
`;

.

Ответ или решение

Как заставить Chrome использовать ваш шрифт вместо шрифта автора

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

1. Изменение шрифтов через настройки Chrome

Хотя настройки Chrome предлагают возможности изменения шрифтов, они часто работают только в том случае, если на сайте не указаны альтернативные шрифты. Для доступа к этим настройкам:

  1. Откройте Chrome.
  2. Перейдите в меню (три точки в правом верхнем углу).
  3. Выберите «Настройки» > «Дополнительные настройки» > «Веб-контент» > «Настроить шрифты».
  4. Выберите шрифты для различных категорий (обычный, курсив, жирный, и т.д.).

Однако, как вы уже заметили, если веб-сайт определяет собственные шрифты через CSS, эти настройки могут быть игнорированы.

2. Использование JavaScript Bookmarklet

Для тех, кто хочет получить более гибкий контроль, вы можете использовать JavaScript bookmarklet. Вставьте следующий код в адресную строку (заменив Source Sans Pro на желаемый шрифт):

javascript:Array.prototype.forEach.call(document.getElementsByTagName("*"), function(e){e.style.fontFamily ="Source Sans Pro"})

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

3. Использование TamperMonkey

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

Вот пример простого скрипта, который устанавливает шрифт Consolas на всех сайтах:

// ==UserScript==
// @name         Force font
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  Устанавливает шрифт на всех страницах на Consolas
// @author       Вы
// @match        *://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    Array.prototype.forEach.call(document.getElementsByTagName("*"), function(e) {
        e.style.fontFamily = "Consolas";
    });
})();

Если вы хотите, чтобы разные элементы отображались с разными шрифтами (например, фиксированный шрифт для pre и code), можно использовать более сложный вариант:

(function() {
    'use strict';

    Array.prototype.forEach.call(document.getElementsByTagName("*"), function(e) {
        if (e.tagName === "PRE" || e.tagName === "CODE") {
            e.style.fontFamily = 'Go Mono';
        } else {
            e.style.fontFamily = 'Go Medium';
        }
    });
})();

4. Встроенные шрифты с помощью @font-face

Если вы хотите использовать нестандартные шрифты, вы можете встроить их в скрипт с помощью правила @font-face:

style.textContent = `
    @font-face {
        font-family: 'ВашШрифт';
        src: url('путь/к/вашему_шрифту.woff2') format('woff2');
    }
    * {
        font-family: 'ВашШрифт' !important;
    }
`;

5. Расширение Force Font

Также есть расширение под названием Force Font, которое можно установить из Chrome Web Store. Хотя оно может не работать полностью на сайтах Google, тем не менее оно достаточно эффективно на других ресурсах.

Заключение

Теперь у вас есть несколько способов изменить отображаемые шрифты в Google Chrome. Вы можете выбрать тот метод, который вам наиболее удобен и подходит под ваши конкретные потребности. Настройка пользовательского шрифта может значительно повысить комфорт вашего веб-серфинга, и вы сможете сосредоточиться на содержимом, а не на шрифте, который вам не нравится.

Оцените материал
Добавить комментарий

Капча загружается...