Проблема с самостоятельным размещением символов материалов на сервере разработкиCSS

Разбираемся в CSS
Ответить
Anonymous
 Проблема с самостоятельным размещением символов материалов на сервере разработки

Сообщение Anonymous »

У меня проблема в Dev, которой нет в локальной версии,
в Dev. Символы материалов. Контурные значки не загружаются, у меня есть два новых файла CSS с определенными гарнитурами шрифтов и классами CSS, один из которых — Material. Иконки, которые работают (предупреждения с обычными вариациями, но работают) и символы материалов, выделенные также с предупреждением, но не работают, предупреждения есть только для разработчиков.
Кто-нибудь знает, что я делаю неправильно?
Предупреждения:
Не удалось декодировать шрифт: ...
Ошибка анализа OTS: недопустимая sfntVersion: 1008821359
Предупреждения разработчиковлокальные заголовки
локальная сеть
на вкладке «Просмотр» — нормальная загрузка шрифтов
Заголовки Dev
в Вкладка «Предварительный просмотр» — пустая белая страница
Сеть разработчиков
Src/assets
styles.scss

Код: Выделить всё

@import 'src/assets/styles/material-icons.scss';
@import 'src/assets/styles/material-symbols-outlined.css';
material-symbols-outlined.css

Код: Выделить всё

@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
font-weight: 100 700;
src: url('/assets/icons-package/material-symbols-outlined2.woff2') format('woff2');
}

.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
material-icons.scss

Код: Выделить всё

@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url('/assets/icons-package/mat-icons.woff2') format('woff2'),
local('MaterialIcons-Regular'),
url('/assets/icons-package/MaterialIcons-Regular.d1b99623aaa86364.woff2') format('woff2'),
url('/assets/icons-package/MaterialIcons-Regular.14b0bb77466d9f38.woff') format('woff'),
url('/assets/icons-package/MaterialIcons-Regular.fa58bcb97f2ed321.ttf') format('truetype');
}
@font-face {
font-family: 'Material Icons Outlined';
font-style: normal;
font-weight: 400;
src: url('/assets/icons-package/mat-icons-outlined.woff2') format('woff2');
}
/* v108 */
@font-face {
font-family: 'Material Icons Round';
font-style: normal;
font-weight: 400;
src: url('/assets/icons-package/mat-icons-round.woff2') format('woff2');
}
/* v109 */
@font-face {
font-family: 'Material Icons Sharp';
font-style: normal;
font-weight: 400;
src: url('/assets/icons-package/mat-icons-sharp.woff2') format('woff2');
}
/* v112 */
@font-face {
font-family: 'Material Icons Two Tone';
font-style: normal;
font-weight: 400;
src: url('/assets/icons-package/mat-icons-two-tone.woff2') format('woff2');
}

body {
--google-font-color-materialiconstwotone:none;
}

.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}

.material-icons-outlined {
font-family: 'Material Icons Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}

.material-icons-round {
font-family: 'Material Icons Round';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}

.material-icons-sharp {
font-family: 'Material Icons Sharp';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}

.material-icons-two-tone {
font-family: 'Material Icons Two Tone';
font-weight: normal;
font-style: normal;
font-size:  24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
-webkit-font-feature-settings: 'liga';
-webkit-font-smoothing: antialiased;
}
Я пробовал много вещей, варианты пути "../", "src/path" "/assets/.." также в style.scss, добавил конкретный путь к значку- пакеты в ресурсах angular.json, скачал разные файлы woff2 для символов, но ничего не работает.

Подробнее здесь: https://stackoverflow.com/questions/787 ... dev-server
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»