Отказ от ответственности: Я не могу проверить, что любое из решений, которые я написал ниже, работает, так как я не могу воспроизвести проблему на моем устройстве в JSFiddle, который вы предоставили. Для меня это нормально отображается в Firefox и Chrome. FWIW: я использую Mac Mini на MacOS 10.14.6 с дисплеем 4K при разрешении 1920 x 1080 (то есть HiDPI). Один и тот же браузер (т. Е. Firefox) может обрабатывать шрифты по-разному в зависимости от операционной системы и настроек оборудования.
Решение
Демонстрационная ссылка для md-steppers использует данные SVG в CSS:
.md-step.md-complete md-step-label-wrapper::before {
content: '\7';
background: #106cc8 url('data:image/svg+xml;utf8,<svg fill="rgba(255,255,255,0.87)" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>') no-repeat center center; }
См. строку 398
Я, вероятно, попытался бы использовать этот же метод и избегать используя иконку шрифта, если вы думаете, что именно здесь возникает проблема. Если у вас также есть такая же проблема в Firefox по демонстрационной ссылке md-steppers выше, то я думаю, что проблема больше, чем просто шрифты значков, и также влияет на SVG. Вы можете прокрутить вниз до: Другие возможные исправления .
Значки Material Design можно загрузить в формате SVG с здесь . Используйте поисковый фильтр на боковой панели и введите edit для нужного значка, затем нажмите кнопку [Download] SVG 24 в левом нижнем углу.
Загруженный значок будет черного цвета по умолчанию, поэтому Вот некоторые изменения, которые вам нужно будет сделать, чтобы сделать его подходящим для использования.
Откройте загруженный SVG в редакторе кода и обратитесь к форматированию SVG в CSS для md-steppers демо. Измените свойства height и width, а также добавьте свойство fill в тег <svg>, чтобы оно выглядело примерно так:
<svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16" fill="rgba(255,255,255,0.87)"><path ...leave as is... /><path ...leave as is... /></svg>
Скопируйте код SVG в одну строку и использовать его аналогично тому, как это используется в md-steppers демо CSS:
.md-step.md-active md-step-label-wrapper::before, .md-step.md-success md-step-label-wrapper::before {
content: '\7';
background: #106cc8 url('data:image/svg+xml;utf8,<svg fill="rgba(255,255,255,0.87)" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') no-repeat center center;
}
JSFiddle: https://jsfiddle.net/wx0brdjL/
В качестве альтернативы , вы можете сохранить SVG после изменения ширины / высоты / заполнения в файл, а затем ссылаться на него в CSS, например:
background-image: url('edit-24px.svg');
Другие возможные исправления:
Если использование SVG, описанного выше, все еще вызывает размытие на Firefox, или если вы хотите придерживаться шрифта иконки, попробуйте несколько вещей, которые могут исправить способ отображения шрифта иконки Ваше устройство:
Опция 1
Применение transform: translateZ(0) к &.md-active md-step-label-wrapper или &:before.
Вариант 2
Применение сглаживания шрифтов (см. Firefox Speci c префикс поставщика) или текст-рендеринг CSS свойства. Помните, что изменения здесь могут повлиять на способ рендеринга на чужом устройстве.
Опция 3
Я только что столкнулся с этой открытой проблемой на Github Material Design Icons, где пользователь рекомендует использовать CSS hack: transform: rotate(0.03deg)