Сделать новый рендеринг шрифтов, как в EDGE
-
Шрифты в хромиум-бразуерах блеклые (по сравнению с firefox). Но сейчас в Мікрософт Эдж появилась настройка рендеринга шрифтов в соответствие с настройкой cleartype Windows.
Хочу такую же настройку и в Вивальди.
Подрбнее https://blogs.windows.com/msedgedev/2021/06/02/improving-font-rendering-in-microsoft-edge/
-
@aplan said in Сделать новый рендеринг шрифтов, как в EDGE:
Шрифты в хромиум-бразуерах блеклые (по сравнению с firefox). Но сейчас в Мікрософт Эдж появилась настройка рендеринга шрифтов в соответствие с настройкой cleartype Windows.
Хочу такую же настройку и в Вивальди.
Подрбнее https://blogs.windows.com/msedgedev/2021/06/02/improving-font-rendering-in-microsoft-edge/
Пока в VIVALDI такая возможность не реализована, можно использовать скрипт для Tampermonkey:
// ==UserScript== // @name Fix image contrast and text readability in Chrome_4 // @description Userscript to improve the readability of text and contrast of images in the browser Google Chrome and its derivatives. // @author kichrot // @match *://*/* // @include *://*/* // @run-at document-start // @grant unsafeWindow // @compatible chrome // @version 0.4 // ==/UserScript== var weight = 0; /* The variable changes the weight of the font/Переменная изменяет толщину шрифта */ var weight_blur = 0.6; /* The variable changes the weight and blurs the borders of the font/Переменная изменяет толщину и размывает границы шрифта */ var lightens_font_color = 0.2; /* Variable lightens the color of the font/Переменная осветляет цвет шрифта*/ var font = 'Helvetica'; /* Variable assigns the font/Переменная назначает шрифт */ /* Verdana | Arial | Helvetica | HelveticaNeueCyr | Tahoma |Lato| Noto Sans | Open Sans | Manrope | Roboto | Montserrat */ var unit = 'px'; /* The variable assigns the unit of measure/Переменная присваивает единицу измерения */ /* px | em | ex | rem | vh | vw */ (function () { 'use strict'; var css = document.createElement('style'); css.innerHTML += [`*{`, `-webkit-text-fill-color:currentColor !important;`, //`-webkit-text-fill-color:transparent !important;`, `text-shadow:`+ `-${weight}${unit} -${weight}${unit} ${weight_blur}${unit} rgba(250,250,250,${lightens_font_color}) /*белая тень наверх и влево */,`+ `${weight}${unit} ${weight}${unit} ${weight_blur}${unit} rgba(250,250,250,${lightens_font_color}) /*белая тень вниз и вправо */,`+ `${weight}${unit} ${weight}${unit} ${weight_blur}${unit} currentColor/*тёмная тень вверх и вправо*/,`+ `-${weight}${unit} -${weight}${unit} ${weight_blur}${unit} currentColor !important;/*тёмная тень вниз и влево*/`, `-webkit-font-smoothing: subpixel-antialiased /*antialiased*/ !important;`, `text-rendering: geometricPrecision !important;`, `}`, `*:not([class*=\"icon\"]):not([class*=\"ico\"]):not([class*=\"button\"]):not([class*=mjx]):not([class*=vjs]):not([class*=fa]):not([class*=ms-Button-icon]):not([class*=DPvwYc]):not([class*=bb]):not([class*=icon]):not([class*=ll]):not(i) {`, `font-family: ${font} !important;`, `}`, `img {`, `image-rendering: -webkit-optimize-contrast !important;`, `}` ].join("\n"); document.documentElement.appendChild(css); }) ();
Поиграйтесь со значениями переменных, можно настроить вполне удобоваримо.
-
Я пробовал разные плагины и настройки. Но у меня проблема упиралась в скорость Во всех вариантах, если я открывал статью на хабре с комментариями, то сперва открывается «обычный» вариант шрифтов, а через секунду все это жирнеет. Очень неприятно для глаз. Поэтому и прошу, чтобы сделали в Вивальди из-коробки новое поведение шрифтов.
-
@aplan said in Сделать новый рендеринг шрифтов, как в EDGE:
Я пробовал разные плагины и настройки. Но у меня проблема упиралась в скорость Во всех вариантах, если я открывал статью на хабре с комментариями, то сперва открывается «обычный» вариант шрифтов, а через секунду все это жирнеет. Очень неприятно для глаз.
У меня, с предложенным выше скриптом, такого нет.
-
@kichrot я не знаю почему , но твоя первая версия скрипта , имитирует рендеринг шрифтов на 99 % , а этот какой то не совсем тот , хотя может я не прав + сложно как то
Скину его сюда , может кому то тоже больше зайдёт первая версия , в ней вообще отличий от edge не видно , возможно только из-за того что она 1 версия в ней багов больше ( ? ) , я там только толщину на 0 поставил и стало идеально как по мне .
// ==UserScript== // @name Font Rendering Fix // @description Font Rendering Fix // @author kichrot // @run-at document-start // @match *://*/* // @include *://*/* // @compatible chrome // @version 0.1 // ==/UserScript== (function() {var css = [ "html, body {", " -webkit-font-smoothing: subpixel-antialiased !important;", /*" text-shadow: 0px 0px 0px !important;",*/ " text-shadow: transparent 0px 0px 0px, rgba(0,0,0, 0.68) 0px 0px 0px !important;", " -webkit-text-stroke-width: 0 px !important;", "}" ].join("\n"); if (typeof GM_addStyle != "undefined") { GM_addStyle(css); } else if (typeof PRO_addStyle != "undefined") { PRO_addStyle(css); } else if (typeof addStyle != "undefined") { addStyle(css); } else { var node = document.createElement("style"); node.type = "text/css"; node.appendChild(document.createTextNode(css)); var heads = document.getElementsByTagName("head"); if (heads.length > 0) { heads[0].appendChild(node); } else { // еще нет heads document.documentElement.appendChild(node); } } })();
-
@nav159 а как и куда этот срипт использовать?
-
-
так какой всё таки лучше скрипт использовать? может уже и обновление есть?
-
@nav159 said in Сделать новый рендеринг шрифтов, как в EDGE:
text-shadow: transparent 0px 0px 0px, rgba(0,0,0, 0.68)
а зачем здесь делать прозрачность и тень для текста??
и ошибки
-
@intersk скрипт писал не я , я в программировании не разбираюсь , просто несмотря на ошибки , этот скрипт делает шрифт идентичным нынешнему edge . Так что хз .
Можешь попробовать оба скрипта, но как я понял более новый , и сложный , надо настривать под себя , по умолчанию он абсолюно не тот шрифт выдает .
-
@nav159 said in Сделать новый рендеринг шрифтов, как в EDGE:
надо настривать под себя , по умолчанию он абсолюно не тот шрифт выдает
Надо начать с нулевых значений переменных и с закомментирования замены шрифта:
// ==UserScript== // @name Fix image contrast and text readability in Chrome_4 // @description Userscript to improve the readability of text and contrast of images in the browser Google Chrome and its derivatives. // @author kichrot // @match *://*/* // @include *://*/* // @run-at document-start // @grant unsafeWindow // @compatible chrome // @version 0.4 // ==/UserScript== var weight = 0.0; /* The variable changes the weight of the font/Переменная изменяет толщину шрифта */ var weight_blur = 0.0; /* The variable changes the weight and blurs the borders of the font/Переменная изменяет толщину и размывает границы шрифта */ var lightens_font_color = 0.0; /* Variable lightens the color of the font/Переменная осветляет цвет шрифта*/ var font = 'Helvetica'; /* Variable assigns the font/Переменная назначает шрифт */ /* Verdana | Arial | Helvetica | HelveticaNeueCyr | Tahoma |Lato| Noto Sans | Open Sans | Manrope | Roboto | Montserrat */ var unit = 'px'; /* The variable assigns the unit of measure/Переменная присваивает единицу измерения */ /* px | em | ex | rem | vh | vw */ (function () { 'use strict'; var css = document.createElement('style'); css.innerHTML += [`*{`, `-webkit-text-fill-color:currentColor !important;`, //`-webkit-text-fill-color:transparent !important;`, `text-shadow:`+ `-${weight}${unit} -${weight}${unit} ${weight_blur}${unit} rgba(250,250,250,${lightens_font_color}) /*белая тень наверх и влево */,`+ `${weight}${unit} ${weight}${unit} ${weight_blur}${unit} rgba(250,250,250,${lightens_font_color}) /*белая тень вниз и вправо */,`+ `${weight}${unit} ${weight}${unit} ${weight_blur}${unit} currentColor/*тёмная тень вверх и вправо*/,`+ `-${weight}${unit} -${weight}${unit} ${weight_blur}${unit} currentColor !important;/*тёмная тень вниз и влево*/`, `-webkit-font-smoothing: subpixel-antialiased /*antialiased*/ !important;`, `text-rendering: geometricPrecision !important;`, `}`, // `*:not([class*=\"icon\"]):not([class*=\"ico\"]):not([class*=\"button\"]):not([class*=mjx]):not([class*=vjs]):not([class*=fa]):not([class*=ms-Button-icon]):not([class*=DPvwYc]):not([class*=bb]):not([class*=icon]):not([class*=ll]):not(i) {`, // `font-family: ${font} !important;`, // `}`, `img {`, `image-rendering: -webkit-optimize-contrast !important;`, `}` ].join("\n"); document.documentElement.appendChild(css); }) ();
И дальше уже экспериментировать с переменными, если потребуется.
-
Кстати, @kichrot, вот здесь
`-${weight}${unit} -${weight}${unit} ${weight_blur}${unit} rgba(250,250,250,${lightens_font_color}) /*белая тень наверх и влево */,`+ `${weight}${unit} ${weight}${unit} ${weight_blur}${unit} rgba(250,250,250,${lightens_font_color}) /*белая тень вниз и вправо */,`+ `${weight}${unit} ${weight}${unit} ${weight_blur}${unit} currentColor/*тёмная тень вверх и вправо*/,`+ `-${weight}${unit} -${weight}${unit} ${weight_blur}${unit} currentColor !important;/*тёмная тень вниз и влево*/`,
с комментариями что-то не то.
-
@nav159 said in Сделать новый рендеринг шрифтов, как в EDGE:
надо настривать под себя , по умолчанию он абсолюно не тот шрифт выдает
Естественно, так как значения переменных в предложенном скрипте я выставлял под свои предпочтения.
-
@sedative29rus said in Сделать новый рендеринг шрифтов, как в EDGE:
с закомментирования замены шрифта
В скрипте для переменной замены шрифта на сайте в комментарии представлены шрифты которые по моему мнению наиболее читабельны и удобны. Можно попробовать их подставлять, вместо шрифта, который выставлен в скрипте по умолчанию. Естественно надо проверить, что соответствующий шрифт установлен в системе.
Ну, а так тот да, если замена шрифта не требуется, то следует закомментировать строкуfont-family: ${font} !important;
-
@sedative29rus said in Сделать новый рендеринг шрифтов, как в EDGE:
с комментариями что-то не то.
А, что не то с комментариями???
Комментарии не влияют на работу скрипта и их можно смело удалять. -
@kichrot said in Сделать новый рендеринг шрифтов, как в EDGE:
что не то с комментариями???
В одной строке смещение отрицательное по обеим осям описано как 'наверх и влево' (правильно), а в другой точно такое же смещение уже 'вниз и влево' (неправильно). То же самое и с положительными.
Разумеется, это ни на что не влияет, но всё же. -
В CSS нет параметра определяющего относительную жирность. Жирность шрифта определяется абсолютными значениями параметра font-weight: http://htmlbook.ru/css/font-weight .
-
`-webkit-font-smoothing: subpixel-antialiased /*antialiased*/ !important;`, `font-weight: 600;`, `text-rendering: geometricPrecision !important;`,
вот так строку вставьте в этом месте. Значение устанавливается от 100 до 900 с шагом 100.
А -1 вообще по идее там у вас не должно работать. -
@tsvetkov1964 Ну вообще, лично мне этот вариант скрипта что-то не понравился.
Я себе из этого запилил под свои глаза и монитор что-то такое:var weight = 0.00; var blur = 0.00; var opacity = 0.33; var unit = 'rem'; /* px em ex rem vh vw */ (function () { 'use strict'; var css = document.createElement('style'); css.innerHTML += [ `*:not([class*=\"icon\"]):not([class*=\"ico\"]):not([class*=\"button\"]):not([class*=mjx]):not([class*=vjs]):not([class*=fa]):not([class*=ms-Button-icon]):not([class*=DPvwYc]):not([class*=bb]):not([class*=icon]):not([class*=ll]):not(i) {`, `text-shadow:`+ `-${weight}${unit} -${weight}${unit} ${blur}${unit} rgba(180,180,180,${opacity}),`+ `${weight}${unit} ${weight}${unit} ${blur}${unit} rgba(0,0,0,${opacity*2.5});`, `-webkit-font-smoothing: subpixel-antialiased !important;`, /*subpixel-antialiased/antialiased*/ `text-rendering: geometricPrecision !important;`, // `font-weight: 400;`, `}`, ].join("\n"); document.documentElement.appendChild(css); }) ();
(Закомментированную строку font-weight: 400; на всякий случай допишу)
А у Вас в винде масштаб увеличенный, да? Я сегодня проверял, включение флага vivaldi://flags/#enable-pixel-canvas-recording что-то в принципе меняет, но не знаю в лучшую ли сторону.
-
@tsvetkov1964 said in Сделать новый рендеринг шрифтов, как в EDGE:
@sedative29rus Нет, масштаб 100%.
С вашими настройками действительно получше. Только у меня один сайт перестал отображаться - ЖЖ.
Что может так сокрушительно на него влиять?Вряд ли этот скрипт. Я зашёл туда, всё в порядке.