Шрифты OpenType, HTTP-предупреждения и Media Capture API Google выпустила Chrome 62


Релиз Google Chrome 62. Что нового

Компания Google представила релиз web-браузера Chrome 62. Одновременно доступен стабильный выпуск свободного проекта Chromium, выступающего основой Chrome. Браузер Chrome отличается использованием логотипов Google, возможностью загрузки модуля Flash по запросу, наличием системы отправки уведомлений в случае краха, модулями для воспроизведения защищённого видеоконтента, системой автоматической установки обновлений и передачей при поиске RLZ-параметров.

  • Расширен спектр ситуаций при которых выводится сообщение о небезопасном соединении при обращении к сайтам по HTTP. Помимо уже выставляемой метки небезопасного соединения при заполнении форм ввода пароля и номеров кредитных карт, аналогичное предупреждение теперь будет выводиться при заполнении любых форм данных на страницах открытых по HTTP, а также при открытии сайтов по HTTP в режиме инкогнито;
  • Возможность отключить звук для отдельных сайтов. Пользователь может на постоянной основе заблокировать вывод звука для конкретных сайтов, которые злоупотребляют автоматическим воспроизведением видео или раздражающими звуковыми эффектами;
  • В настройки добавлена опция для включения режима обратной прокрутки , меняющего направление сдвига содержимого при прокрутке вращеним колеса мыши;
  • В API Network Infomation добавлены метрики качества сетевого соединения, позволяющие оценить реальную пропускную способность текущего подключения и задержки в доставке пакетов, помимо ранее предоставляемых сведений о теоретической скорости сетевого интерфейса. Кроме того, предоставлены средства для постоянного отслеживания сетевой производительности и генерации уведомлений об изменении качества канала связи. Для упрощения информация о скорости привязана к классам сетевого подключения, например, 2G, 4G, WiFi и Ethernet (например, будет выставлен класс 2G, даже если фактическое соединение Ethernet, но наблюдаются большие задержки). С практической стороны, разработчики могут воспользоваться новым API для загрузки упрощённой версии сайта или отключения сервисов, требующих интенсивной передачи данных, в условиях медленного сетевого соединения;
  • Добавлена поддержка изменчивых шрифтов OpenType (variable fonts), в которых толщина, ширина и другие стилистические характеристики глифа могут произвольно меняться. Вместо отдельного описания каждого представления, комбинации возможных вариантов определяются в одном шрифтовом ресурсе через определения возможных delta-отклонений от базового глифа с получением результата через применение интерполяции. Таким образом, вместо использования для каждого стиля своего файла со шрифтом, можно обойтись одним шрифтовым файлом, что значительно сокращает размер данных, необходимых для получения заданного результата. Управление параметрами отрисовки изменчивых шрифтов осуществляется при помощи CSS-свойств font-weight (теперь можно указывать не только класс, но и цифровые значения для толщины и стиля) и font-variation-settings (более тонкая настройка глифов);
  • В API DOM Elements добавлено расширение Media Capture, позволяющее захватывать содержимое, отрисовываемое при помощи HTMLMediaElements (например, контент, выводимый через теги video и audio). Захват инициируется методом captureStream(), после чего мультимедийные данные передаются в форме MediaStream напрямую из HTMLMediaElements. В том числе возможна запись и отправка захваченного потока через WebRTC и обработка при помощи API WebAudio;
  • Внесены новые оптимизации производительности в JavaScript-движок V8. До 6.5 раз увеличена скорость работы метода Object#toString(), что положительно сказалась на работе фреймворков, использующих Object#toString(), например, производительность AngularJS возросла примерно на 3% (по тесту Speedometer). Также до 3 3 раз ускорена работа метода String#includes(), до 5 раз someProxy(params) и SomeOtherProxy(params) и до 6.5 раз someProxy.property. Внесены оптимизации в работу Map, Set, WeakMap и WeakSet, позволившие ускорить работу с хэшами при использовании библиотеки Hashcode;
  • Улучшена работа движка V8 на устройствах с небольшим объёмом ОЗУ, для которых начальный размер буфера для объектов с коротким жизненным циклом уменьшен до 512K;
  • Максимальный размер строк на 64-разрядных системах увеличен с 2^28 (256 Мб) до 2^30 символов (1 Гб);
  • В движке разбора регулярных выражений по умолчанию включен режим dotAll при указании флага «s», при котором под маску «.» подпадают в том числе символ перевода строки (/foo.bar/su.test(&&��foo\nbar&&��); // true). Добавлен механизм оценки Lookbehind, позволяющий определить в регулярном выражении, что один шаблон предшествует другому (например, сопоставить сумму в долларах без захвата знака доллара);
  • В API PaymentRequest для каждого метода платежей обеспечена возможность указания различных цен и элементов при помощи модификатора PaymentDetailsModifier.data;
  • Добавлена поддержка html-элементов ‹data› и ‹time› для привязки значений для автоматического разбора и указания времени;
  • В парсер значений цветов в CSS добавлена поддержка 8- и 4-значных шестнадцатеричных форматов значений цвета (#RRGGBBAA и #RGBA);
  • Добавлен «Origin Trial» для WebVR, что позволяет начать эксперименты с web-приложениями для виртуальной реальности;
  • Расширен интерфейс загрузки файлов в Chrome для Android через формы input type=»file» , обеспечена возможность выбора для загрузки сразу нескольких файлов, если через атрибут accept разрешена только загрузка изображений;
  • В API MediaSource расширены средства перемещения по потоку при помощи метода HTMLMediaElement.seekable, благодаря новым API setLiveSeekableRange и clearLiveSeekableRange.
  • В API Media Source Extensions (MSE) добавлена поддержка формата кодирования звука FLAC;

Кроме нововведений и исправления ошибок в новой версии устранено 35 уязвимостей. Многие из уязвимостей выявлены в результате автоматизированного тестирования инструментами AddressSanitizer, MemorySanitizer, Control Flow Integrity и LibFuzzer. Критических проблем, которые позволяют обойти все уровни защиты браузера и выполнить код в системе, за пределами sandbox-окружения, не выявлено. В рамках программы по выплате денежного вознаграждения за обнаружение уязвимостей для текущего релиза компания Google выплатила 20 премий на сумму более 40 тысяч долларов США (одна премия 7500$, две премии 5000$, пять премий 3000$, одна премия 2000$, три премии 1000$, одна премия 1337$ и три премии 500$). Размер пяти вознаграждений пока не определён.

Google Chrome 62

Соединение «Не защищено» для HTTP-страниц с формой ввода данных.

Вышла новая стабильная версия браузера Google Chrome 62 для операционных систем Windows, Linux и Mac OS. Как и обещали разработчики, браузер начал показывать предупреждение «Не защищено» в двух новых ситуациях. В первом случае, когда на HTTP-странице присутствуют любые поля ввода данных. К примеру, форма поиска или текстовое поле. Во втором случае надписью «Не защищено» помечаются все HTTP-страницы открытые в режиме инкогнито.

Рис. 2. Обработка HTTP-страницы с данными введенными пользователем в Chrome 62

В остальном же, рядовые пользователи вряд ли заметят какие-либо изменения в браузере, поскольку большинство из них произошли под капотом Хрома и предназначены для веб-разработчиков.

В частности, в Chrome 62 было расширено API Network Infomation позволяющее веб-разработчикам, оценить качество сетевого соединения посетителей своих сайтов.

Кроме того, в этом выпуске реализована поддержка изменчивых шрифтов OpenType Font Variations, для которых при помощи CSS-свойств можно задавать цифровые значения толщины, ширины и прочего.

Рис. 3. Анимированные примеры шрифтов Amstelvar и Decovar

В Google Chrome 62 появилась возможность захвата и обработки мультимедиа контента из HTMLMediaElements с использованием расширения Media Capture из API DOM Elements.

Напоследок стоит отметить, что релиз Google Chrome 62 включает 35 исправлений безопасности. К слову сказать критических уязвимостей среди них выявлено не было.

Снова шрифты Chrome. Побеждаем муть.

C выходом финалки 52 релиза google chrome отображение шрифтов превратилось в УГ.

выглядит оно примерно так:

Раньше проблема решалась путем отключения во флагах DirectWrite.

С новым релизом флаг этот скрыт и включен постоянно. Отключить его пользователю нельзя.

Решение пока только одно — откатиться обратно на 51 релиз.

1. удаляем 52 релиза хрома.

4. ДО запуска отключаем автообновление (останавливаем службу gupdate и прибиваем файлик googleUpdate.exe)

Дубликаты не найдены

Версия 52.0.2743.116 m — глюков со шрифтами нет.

Может быть все таки не в хроме дело?

скорее всего — «сглаживание экранных шрифтов» — это опция в настройках производительности Windows

стоит 52 — все в порядке со шрифтами

Да, проблема в хроме, и на твоих скринах это заметно. Рад за тебя, что ты не видишь этого мыла, но мне, как и многим другим это сильно заметно, из-за чего приходится сидеть на 51 версии хрома с отключенной опцией «DirectWrite»
Но я прикреплю сравнительные скрины, может ты прозреешь.
Первое — это отключенный DirectWrite, второе — включенный DirectWrite

До сих пор актуально

спасибо огромное,намучился с шрифтами после обновления

Правильно удалять службу обновления в командной строке:

sc delete gupdate

sc delete gupdatem

да, но сложней ) там картинки как программку удалить, а ты хочешь чтоб люди с cmd работали

Мастер Йода рекомендует:  Цикл foreach урок с практикой

Судя по тенденциям Корпорации Добра- сектантам Хромиума, скоро все же придется покупать отдельный хромобук, только для удовлетворения аппетита их ненасытного любимчика, который давно уже обогнал своим темпом роста- темп развития самой Сети.


У меня для тебя плохие новости (хотя это уже и далеко не свежие).

В адресной строке набрать или вставить chrome://flags/#disable-direct-write открыть страницу с настройками экспериментальных функций в выделенном поле «Отключить DirectWrite Windows» нажать «Включить», перезапустить браузер.

Там вообще много всего.

в 52 релизе этого нет. в посте об этом сказано в первой строчке.

а если просто удалить к херам и поставить нормальный браузер?

это и есть нормальный браузер

Комментарий дня

Всегда думал, что такие штуки выдуманы кем-то для смеха что-ли. Пока у знакомого не случилась ситуация — женат он не был официально, но жил с девушкой достаточно давно, всех всё устраивало. Работал он вахтой — 20 чз 10. И вот девушка забеременела, родила. И когда отпустило немного от всех пред- и послеродовых забот, начала настаивать на свадьбе. Парень и против не был, но заклинило его на ДНК-тесте, хочу, говорил, быть уверенным, вот или так, или никак. Может работа повлияла на такое решение. Девушка пообижалась, но согласилась — типа дурак ты и скрывать мне нечего. Да-да, тест показал — не его. А девушка всё-равно называла его дураком и рассказывала, что любит его и совсем не важно, кто зачал, и отец тот, кто воспитает. С тех пор к таким историям отношусь менее скептически)

Chrome 62 arrives with OpenType variable fonts and warning about HTTP sites in Incognito mode

Google has launched Chrome 62 for Windows, Mac, and Linux. Additions in this release include improvements to the Network Quality Estimator API, OpenType variable fonts, media capture from DOM elements, and more warnings related to HTTP, among other developer features. You can update to the latest version now using the browser’s built-in silent updater or download it directly from google.com/chrome.

Chrome is arguably more than a browser. With over 1 billion users, it’s a major platform that web developers have to consider. In fact, with Chrome’s regular additions and changes, developers have to keep up to ensure they are taking advantage of everything available.

While the Network Infomation API has been available in previous versions of Chrome, it only provided theoretical network speeds based on the type of connection a user has. In Chrome 62, the API now provides developers with network performance metrics as experienced by the client. Developers can thus inspect the current expected round trip time and throughput, be notified of performance changes, and tailor content to network constraints. To simplify application logic, the API even summarizes measured network performance as the cellular connection type most similar to it, regardless of whether the actual connection is another technology entirely (such as Wi-Fi or ethernet).

Chrome 62 also gains support for OpenType font variations. Until now, one font file contained just a single instance of a font family, including only one weight (Regular, Bold, Black, and so on) or one stretch (Normal, Condensed, Expanded, and so on). OpenType variations provide a continuous spectrum of stylistic variations while saving space and bandwidth, since they all load from a single compact font file. Stretch, style, and weight can be adjusted using the respective updated CSS properties (which now allow numeric values) and fine-tuning of variation axis parameters, such as weight or width, is possible using the font-variation-settings CSS property.

The W3C Media Capture from DOM Elements API now allows sites to live-capture content in the form of a MediaStream directly from HTMLMediaElements. Streamed content can be recorded with the captureStream() method, sent remotely using WebRTC, and processed with WebAudio.

Arguably the biggest change in this release, however, is one Google announced back in April. As part of the company’s plan to mark all HTTP sites as non-secure in Chrome, version 62 now marks HTTP sites with entered data and HTTP sites in Incognito mode as non-secure.

HTTPS is a more secure version of the HTTP protocol used on the internet to connect users to websites. Secure connections are widely considered a necessary measure to decrease the risk of users being vulnerable to content injection (which can result in eavesdropping, man-in-the-middle attacks, and other data modification). Data is kept secure from third parties, and users can be more confident they are communicating with the correct website.

With the release of Chrome 56 in January 2020, Google’s browser started marking HTTP pages that collect passwords or credit cards as “Not Secure” in the address bar. Chrome 62 takes this to the next level:

Passwords and credit cards are naturally the most important data to keep private, but ideally no data that users type into websites should be accessible to others on the network. Chrome 62 thus shows the “Not secure” warning when users type data into HTTP sites.

As for browsing in Incognito mode, Google believes users have “increased expectations of privacy.” In this mode, HTTP browsing is potentially visible to others on the network, just like in normal mode. Chrome 62 thus warns users when visiting an HTTP page in Incognito mode.

Eventually, Chrome will always mark HTTP sites as “Not secure.”

Other developer features in this release (some are mobile-specific):

  • The Payment Request API is now available on Chrome for iOS.
  • PaymentRequest now supports different prices and line items per payment method with new”; PaymentDetailsModifier.data.
  • DOM interfaces are now supported for the new”; and new”; HTML elements to give developers a native, machine-readable way to store client-s > with an new”; accept attribute specifying that only images are accepted.
  • Apps using the MediaSource API can now more effectively customize their new”; HTMLMediaElement.seekable range logic using the new Media Source Extensions APIs, new”; setLiveSeekableRange and new”; clearLiveSeekableRange.
  • The new new”; visibility:collapse CSS declaration now hides table rows while preserving their contribution to column widths, rather than treating it like new”; visibility:hidden, which merely skips painting the rows.
  • Media Source Extensions (MSE) now support FLAC, a lossless audio coding format, in ISO-BMFF.
  • Protected media can now be played offline through EME on Chrome for Android.
  • Chrome for Android now supports Widevine L1, allowing sites to play encrypted media in a secure way.
  • Loosened restrictions on escape sequences in template literals unlock new use cases for template tags, such as LaTeX processing.
  • In Android O, sites with notification permissions now appear as a Notification Channel in Android Settings under Chrome, affording users a simpler way to manage permissions.

For what’s new in the browser’s DevTools, check out the release notes.

Chrome 62 also implements 35 security fixes. The following ones were found by external researchers:

  • [$7500+$1337][762930] High CVE-2020-5124: UXSS with MHTML. Reported by Anonymous on 2020-09-07
  • [$5000][749147] High CVE-2020-5125: Heap overflow in Skia. Reported by Anonymous on 2020-07-26
  • [$3000][760455] High CVE-2020-5126: Use after free in PDFium. Reported by Luật Nguyễn (@l4wio) of KeenLab, Tencent on 2020-08-30
  • [$3000][765384] High CVE-2020-5127: Use after free in PDFium. Reported by Luật Nguyễn (@l4wio) of KeenLab, Tencent on 2020-09-14
  • [$3000][765469] High CVE-2020-5128: Heap overflow in WebGL. Reported by Omair on 2020-09-14
  • [$3000][765495] High CVE-2020-5129: Use after free in WebAudio. Reported by Omair on 2020-09-15
  • [$3000][718858] High CVE-2020-5132: Incorrect stack manipulation in WebAssembly. Reported by Gaurav Dewan (@007gauravdewan) of Adobe Systems India Pvt. Ltd. on 2020-05-05
  • [$N/A][722079] High CVE-2020-5130: Heap overflow in libxml2. Reported by Pranjal Jumde (@pjumde) on 2020-05-14
  • [$5000][744109] Medium CVE-2020-5131: Out of bounds write in Skia. Reported by Anonymous on 2020-07-16
  • [$2000][762106] Medium CVE-2020-5133: Out of bounds write in Skia. Reported by Aleksandar Nikolic of Cisco Talos on 2020-09-05
  • [$1000][752003] Medium CVE-2020-15386: UI spoofing in Blink. Reported by WenXu Wu of Tencent’s Xuanwu Lab on 2020-08-03
  • [$1000][756040] Medium CVE-2020-15387: Content security bypass. Reported by Jun Kokatsu (@shhnjk) on 2020-08-16
  • [$1000][756563] Medium CVE-2020-15388: Out of bounds read in Skia. Reported by Kushal Arvind Shah of Fortinet’s FortiGuard Labs on 2020-08-17
  • [$500][739621] Medium CVE-2020-15389: URL spoofing in OmniBox. Reported by xisigr of Tencent’s Xuanwu Lab on 2020-07-06
  • [$500][750239] Medium CVE-2020-15390: URL spoofing in OmniBox. Reported by Haosheng Wang (@gnehsoah) on 2020-07-28
  • [$500][598265] Low CVE-2020-15391: Extension limitation bypass in Extensions. Reported by João Lucas Melo Brasio (whitehathackers.com.br) on 2020-03-28
  • [$N/A][714401] Low CVE-2020-15392: Incorrect registry key handling in PlatformIntegration. Reported by Xiaoyin Liu (@general_nfs) on 2020-04-22
  • [$N/A][732751] Low CVE-2020-15393: Referrer leak in Devtools. Reported by Svyat Mitin on 2020-06-13
  • [$N/A][745580] Low CVE-2020-15394: URL spoofing in extensions UI. Reported by Sam @sudosammy on 2020-07-18
  • [$N/A][759457] Low CVE-2020-15395: Null pointer dereference in ImageCapture. Reported by johberlvi@ on 2020-08-28
Мастер Йода рекомендует:  Создаём политического Twitter-бота с помощью Node.js и StdLib

Google thus spent at least $40,337 in bug bounties for this release. As always, the security fixes alone should be enough incentive for you to upgrade.

Google releases a new version of its browser every six weeks or so. Chrome 63 will arrive by early December.

Update on October 24: Google today released Chrome 62 for Android. In addition to performance and stability fixes, you can expect three new features: Download files faster with accelerated downloads, view and copy passwords saved with Chrome if device lock is enabled, and quickly see your data savings in the Chrome menu when Data Saver is on.

«Google Chrome 62» official release, OpenType variable font support

Google is the latest stable version of Web browser · Google Chrome «62.0.3202.62«Has been released. The latest Chrome supports OpenType variable fonts, and warnings are displayed whenever a page with an input form is connected via HTTP.

· OpenType variable font
Chrome 62 supports OpenType variable fonts. Compactly combining three different fonts required for variable fonts into one file makes it possible to display styles in CSS without preparing fonts for each style.

· Network Information API
«Network Information API» to acquire indicators of net line performance has been expanded. By doing this, if the effective speed of the net line is very slow, you can improve the display speed by loading the page according to the performance, such as providing a reduced version page.

· Media Capture from DOM Elements API
«Media Capture from DOM Elements API» which can capture media stream directly from HTMLMediaElements like audio and video is supported.

· HTTP site with input form
Warning is displayed when displaying a page that requires high security such as credit card information from Chrome 56 by HTTP connection other than HTTPS, but the page with the input form is displayed by HTTP connection Warnings will be issued even in case.


There are also other vulnerability fixes in Chrome 62, which includes eight «High» of the second seriousness out of four.

Google Chrome предоставляет предупреждение Ресурс, интерпретируемый как «Шрифт», но переносимый с помощью приложения типа MIME/октет-потока:

Я продолжаю получать это предупреждение

Ресурс интерпретируется как «Шрифт», но передается с типом MIME-типа/октетом-потоком: «https://127.0.0.1:8080/assets/font/fontawesome-webfont.woff».

Я использую веб-сервер Play 2.0.4. Я добавил mime-типы в файл application.conf следующим образом

Любая идея, что я могу делать неправильно.

Собственно, я нашел ответ:

Некоторые браузеры, такие как Google Chrome, покажут это предупреждение, когда шрифт загружается с веб-сервера, который устанавливает неожиданный тип MIME для шрифты.

Для многих типов шрифтов существует решение!

Обновите конфигурацию для своего веб-сервера с помощью следующего MIME тип для расширения файла шрифта:

Если вы используют конфигурацию Apache, вы можете включить директиву AddType для каждого типа шрифта:

Приложение AddType/vnd.ms-fontobject eot
AddType font/truetype ttf
Приложение AddType/x-font-woff woff
AddType font/opentype otf

С определенным типом MIME, настроенным для каждого шрифта, а не общим application/octet-stream MIME, вы больше не увидите предупреждения в консоли вашего веб-браузера.

Эта конфигурация — эффективная для очистки консоли — не включает технически правильный MIME-тип для шрифтов, таких как OTF, TTF и WOFF. Для этих типов шрифтов официальный тип MIME не имеет (пока). Официальный тип для WOFF — application/font-woff — запрошен .AddType font/opentype otf

Chrome 62: Improved Network Information API, Support for OpenType Variable Fonts and more!

Chrome 62 improves the network information API with network quality indicators, support for OpenType Variable Fonts has landed, and you can now capture and process media streams from HTMLMediaElements with the Media Capture from DOM elements API.

Pete LePage has all the details and how you can use these new developer features in Chrome 62!

Chrome 62 Beta blog post: https://goo.gl/3YgpW1

Network Information API
Spec: https://goo.gl/5rr3Uq
Chrome Status: https://goo.gl/WUocPG
Demo: https://goo.gl/Hszvh7

OpenType Variable Fonts
CSS Properties: https://goo.gl/A4LzFc
CSS Properties: https://goo.gl/oA6kfN

Media Capture from DOM Elements API
Spec: https://goo.gl/7syXM1
Demo: https://goo.gl/YW5TzK

Next steps toward more connection security: https://goo.gl/sqpsCo

You can learn more about origin trials at https://goo.gl/6FP1a5

Subscribe to the Google Developers channel at https://goo.gl/WkxCU5

Видео Chrome 62: Improved Network Information API, Support for OpenType Variable Fonts and more! канала Google Chrome Developers

Выпуск web-браузера Chrome 62

Компания Google представила релиз web-браузера Chrome 62. Одновременно доступен стабильный выпуск свободного проекта Chromium, выступающего основой Chrome. Браузер Chrome отличается использованием логотипов Google, возможностью загрузки модуля Flash по запросу, наличием системы отправки уведомлений в случае краха, модулями для воспроизведения защищённого видеоконтента, системой автоматической установки обновлений и передачей при поиске RLZ-параметров.

Google Chrome 62 — новая версия с рядом внутренних улучшений

Вышла новая стабильная версия браузера Google Chrome.

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

Так… У Google был план ввода мер по маркировке небезопасных сайтов специальными оповещениями пользователя. Была запланирована очередность постепенного ввода различных мер и, начиная с Google Chrome 62, вводится их очередная порция. Теперь сайты, работающие по незащищенному протоколу HTTP, будут иметь предупреждающую пометку в адресной строке еще в 2-х случаях. Дополнительная плашка «Не защищено» перед адресом сайта будет появляться, если пользователь вводит данные, а также при посещении любых страниц, посещаемых в режиме «Инкогнито».

В этой версии значительно улучшен Network Quality Estimator API. Это позволяет веб-приложениям получать информацию о параметрах сетевого соединении пользователя. Если раньше это была теоретически вычисленная информация, то теперь предоставляются реальные и более надежные данные, которые измеряются в реальном времени. Все это нужно для того, чтобы разработчик мог адаптировать отдаваемый контент, в соответствии с качеством соединения и, например, демонстрировать менее сложную версию веб-приложения пользователям низкоскоростного соединения.

Другим улучшениям Google Chrome 62 является поддержка технологии работы со шрифтами OpenType Font Variations. (OpenType Variable Fonts). Такие шрифты могут содержать значительно более широкие технические данные и сделать шрифты более гибкими в плане стилистической настройки, а также, что очень важно для скорости, более компактными. По сути, это дает быстрые и широко настраиваемые шрифты. Остается добавить, что эта технология была разработана совместно Microsoft, Google, Apple и Adobe и будет поддерживаться повсеместно.

Еще одним нововведением этого выпуска является возможность захвата медиапотоков из элементов HTML Media с помощью Media Capture из DOM Elements API. Это позволяет, используя метод captureStream(), полностью управлять потоковым контентом: манипулировать, записывать, отправлять и производить прочие операции.

И да, там еще 5 десятков прочих менее крупных улучшений. К правило, это расширение различных API и поддержка новых свойств разных веб-технологий. Также в новой версии исправлена масса ошибок, в том числе 35 потенциальных проблем в безопасности браузера.

Бесплатно • Размер: 44.6 Мб • ОС: Windows • Стабильная версия


Оптимизируем загрузку шрифтов Google

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

Справедливости ради стоит сказать, что шрифты Google чрезвычайно популярны. На момент написания этой статьи, их просмотрели в Интернете более 29 триллионов раз, и легко понять, почему – сервис предоставляет доступ к более чем 900 красивым шрифтам, которые вы можете бесплатно использовать на своем веб-сайте. Без шрифтов Google вы были бы ограничены несколькими, так называемыми, «системными шрифтами», установленными на устройстве пользователя.

Системные шрифты или «безопасные веб-шрифты» – это шрифты, которые чаще всего предустанавливаются в операционных системах. Например, шрифты Arial и Georgia поставляются с дистрибутивами Windows, macOS и Linux.

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

Шрифты Google уже оптимизированы

Google Fonts API делает больше, чем просто предоставляет файлы шрифтов в браузер, он также выполняет умную проверку, чтобы увидеть, как он может предоставить файлы в наиболее оптимизированном формате.

Мастер Йода рекомендует:  Скрипт показывает посетителю сколько раз он посетил страницу Javascript

Давайте посмотрим на шрифт Roboto. GitHub говорит нам, что стандартный вариант этого шрифта весит 168kb:

Тем не менее, если запросить этот же вариант шрифта у Google Font API, то вы получите файл, размер которого будет всего 11kb. Как такое возможно?

Когда браузер делает запрос к API, Google сначала проверяет, какие типы файлов поддерживает браузер. Если вы используете последнюю версию Chrome, которая, как и большинство браузеров, поддерживает формат WOFF2, то шрифт будет предоставлен в этом сильно сжатом формате.

Если же заменить браузер на Internet Explorer 11, то вы получите шрифт в формате WOFF.

Наконец, если заменить браузер на IE8, то вы получите шрифт в формате EOT (Embedded OpenType).

Google Fonts поддерживает более 30 оптимизированных вариантов для каждого шрифта и автоматически определяет и предоставляет оптимальный вариант для каждой платформы и браузера. Илья Григорик

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

Кэширование в браузере

Еще одна встроенная оптимизация Google Fonts — кеширование в браузере.

Из-за вездесущей природы Google Fonts браузеру не всегда нужно загружать полные файлы шрифтов. Например, сайт SmashingMagazine использует шрифт «Mija», если ваш браузер впервые видит этот шрифт, ему нужно будет полностью загрузить его до отображения текста, но при следующем посещении веб-сайта, использующего этот шрифт, браузер возьмет уже кэшированную версию.

Поскольку API Google Fonts становится все более широко используемым, вполне вероятно, что у посетителя вашего сайта или страницы уже есть в кэше браузера шрифты Google, используемые в вашем дизайне. FAQ, Google Fonts

Срок действия кэша браузера Google Fonts истекает через год, если он не будет очищен раньше.

Примечание: Mija не является шрифтом Google, но принципы кэширования не зависят от поставщика.

Возможна дополнительная оптимизация

Хотя Google прилагает огромные усилия для оптимизации доставки файлов шрифтов, у вас все равно остаются способы дальнейшей оптимизации, позволяющие значительно уменьшить время загрузки страницы.

1. Ограничение семейств шрифтов

Самая простая оптимизация — использовать как можно меньше семейств шрифтов. Каждый шрифт может добавлять к весу вашей страницы до 400 КБ. Умножьте на несколько разных семейств шрифтов, и вот уже шрифты весят больше, чем вся ваша страница.

Мы рекомендуем использовать не более двух шрифтов — один для заголовков и другой для содержимого. Как правило, этого бывает вполне достаточно. При правильном использовании свойств font-size, font-weight и color можно добиться превосходного результата даже с одним шрифтом.

Три разных значения font-weight одного семейства шрифтов (Source Sans Pro):

2. Исключайте ненужные варианты

Благодаря высокому стандарту качества шрифтов Google многие семейства шрифтов содержат полный спектр доступных значений для свойства font-weight:

  • тонкий (100)
  • тонкий курсив (100i)
  • светлый (300)
  • светлый курсив (300i)
  • обычный (400)
  • обычный курсив (400i)
  • средний (600)
  • средний курсив (600i)
  • жирный (700)
  • жирный курсив (700i)
  • черный (800)
  • черный курсив (800i)

Это отлично подходит для продвинутых сценариев использования, в которых могут потребоваться все 12 вариантов, но для обычного веб-сайта это означает загрузку всех 12 вариантов, когда вам может понадобиться только 3 или 4.

Например, семейство шрифтов Roboto весит

144 КБ. Однако, если вы используете только варианты «обычный», «обычный курсив» и «жирный», то это число уменьшается до

36 КБ. Экономия 75%!

Код по умолчанию для загрузки шрифтов Google выглядит следующим образом:

Если вы так сделаете, то загрузится только вариант ‘обычный 400’. Это означает, что весь светлый, жирный и курсивный текст будет отображаться неправильно.


Чтобы вместо этого загрузить все варианты шрифтов, нам нужно указать их в URL вызова следующим образом:

Однако, очень редко веб-сайт использует все варианты шрифта от тонкого (100) до черного (900). И здесь оптимальной стратегией будет указать только те варианты, которые вы планируете использовать:

Это особенно важно, когда используется несколько семейств шрифтов. Например, если вы используете Lato для заголовков, имеет смысл запрашивать только жирный вариант (и, возможно, еще жирный курсив):

3. Объединяйте запросы

Фрагмент кода, с которым мы работали выше, обращается к серверам Google (fonts.googleapis.com). Это называется HTTP запросом. При этом, чем больше HTTP запросов делает ваша веб-страница, тем дольше она загружается.

Если вы хотите загрузить два шрифта, то вы можете сделать так:

Это отлично будет работать, но приведет к тому, что браузер сделает два запроса. Мы же можем оптимизировать это объединив все в один запрос:

При этом не существует ограничений на количество шрифтов и вариантов в одном запросе.

4. Ресурсные указания

Ресурсные указания – это особые функции, поддерживаемые современными браузерами, которые могут повысить производительность сайта. Мы рассмотрим два таких указания: «Предварительная выборка DNS» и «Предварительное подключение».

Примечание: Если браузер не поддерживает современные функции, он просто игнорирует их. Таким образом, ваша веб-страница будет по-прежнему загружаться нормально.

Предварительная выборка DNS
Предварительная выборка DNS позволяет браузеру начать подключение к Google Fonts API (fonts.googleapis.com), как только страница начнет загружаться. Это означает, что к тому времени, когда браузер готов сделать запрос, часть работы уже будет выполнена.

Чтобы реализовать предварительную выборку DNS для шрифтов Google, просто добавьте на свои веб-страницы в секции такую строчку:

Предварительное подключение
Если вы посмотрите на код добавления шрифтов Google Fonts, то вам покажется, что это будет один HTTP запрос:

Однако, если мы посетим этот URL, то мы увидим еще три запроса на другой URL — https://fonts.gstatic.com. Один дополнительный запрос для каждого варианта шрифта.

Проблема с этими дополнительными запросами заключается в том, что браузер не начнет выполнять эти процессы до тех пор, пока не будет выполнен первый запрос https://fonts.googleapis.com/css. Вот здесь и может помочь Предварительное подключение.

Предварительное подключение — это своего рода расширенная версия предварительной выборки. Оно устанавливается на конкретном URL, который браузер собирается загрузить. Вместо того, чтобы просто выполнять поиск DNS, также завершается согласование TLS и TCP синхронизация.

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

Просто добавив эту строчку кода можно сократить время загрузки страницы на 100 мс. Это становится возможным благодаря запуску соединения одновременно с первоначальным запросом, а не по окончанию ожидания его завершения.

5. Размещение шрифтов локально

Шрифты Google распространяются по лицензии «Libre» или как «свободное программное обеспечение», что дает вам свободу использовать, изменять и распространять шрифты без запроса разрешения. Это означает, что, если вы не хотите, то можете не использовать хостинг Google. Вы можете размещать эти шрифты на своем сервере!

Все файлы шрифтов доступны на Github. Также, можно скачать файл архива zip, содержащий все шрифты (387MB).

Наконец, есть вспомогательный сервис, который позволяет выбирать, какие шрифты вы хотите использовать, а затем предоставляет необходимые файлы.

Но в локальном размещении шрифтов есть и свои недостатки. Когда вы загружаете шрифты в локальное хранилище, вы сохраняете их такими, какие они есть в данный момент. Если шрифты будут улучшены или обновлены, вы не получите эти изменения. Для сравнения, когда вы запрашиваете шрифты из Google Fonts API, вам всегда предоставляется самая последняя версия.

6. Отображение шрифта

Известно, что для загрузки шрифта Google браузеру требуется время. Но что будет с текстом, до того как шрифты будут готовы к использованию? Долгое время было так, что там, где должен находиться текст, браузер отображал пустое место.

Если ничего не показывать, то это может негативно сказаться на восприятии вашего сайта конечным пользователем. Было бы лучше в качестве запасного варианта использовать системный шрифт, а когда шрифт Google будет готов к использованию, просто «поменять» их. Это можно сделать при помощи CSS свойства font-display.

Добавляя значение font-display: swap; в декларацию @font-face, мы предписываем браузеру показывать запасной шрифт до тех пор, пока не станет доступен шрифт Google.

В 2020 году Google объявил, что добавляет поддержку font-display: swap. Для его использования достаточно добавить дополнительный параметр к URL шрифтов:

7. Используйте параметр Text

Малоизвестная особенность Google Fonts API – это параметр text. Этот редко используемый параметр позволяет загружать только те символы, которые вам нужны.

Например, если у вас есть текстовый логотип, который должен отображаться уникальным шрифтом, то вы можете при помощи параметра text загружать только символы, используемые в логотипе.

Это работает так:

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

Примечание: По умолчанию при использовании параметра text загружается только вариант шрифта «Обычный». Чтобы использовать другой вариант, вы должны явно указать его в URL.

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

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