Так отображается в хроме,
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v28/2fcrYFNaTjcS6g4U3t-Y5ewrjPiaoEww8AihgqWRJAo.woff) format('woff');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
line-height: 1.9;
letter-spacing: normal;
text-transform: none;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
.jub-icon-mask.icon-huge {
width: 128px;
height: 128px;
line-height: 128px;
padding: 0;
text-align: center;
font-size: 64px;
box-sizing: content-box;
border-radius: 50%!important;
}
.jub-icon-mask.bg-blue {
background-color: #2196F3;
color: rgba(255, 255, 255, .87);
}
i {
font-size: 64px;
font-weight: 300;
}
А так в safari,как исправить?
Ответ
В новых сафари отображается нормально, для старых браузеров используйте код, как указано в мануале
Вместо:
cloud_done
Вставьте:
Ваш пример:
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(https://fonts.gstatic.com/s/materialicons/v28/2fcrYFNaTjcS6g4U3t-Y5ewrjPiaoEww8AihgqWRJAo.woff) format('woff');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
line-height: 1.9;
letter-spacing: normal;
text-transform: none;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
}
.jub-icon-mask.icon-huge {
width: 128px;
height: 128px;
line-height: 128px;
padding: 0;
text-align: center;
font-size: 64px;
box-sizing: content-box;
border-radius: 50%!important;
}
.jub-icon-mask.bg-blue {
background-color: #2196F3;
color: rgba(255, 255, 255, .87);
}
i {
font-size: 64px;
font-weight: 300;
}
Комментариев нет:
Отправить комментарий