Три окна просмотра, каждое из которых имеет свой собственный веб-шрифт. Но оба окна просмотра отображают один и тот же ш ⇐ Html

[Anonymous]

Мне нужно отобразить несколько областей просмотра на одной веб-странице. У меня есть 3 окна просмотра HTML, каждое из которых имеет свой собственный веб-шрифт. https://dev.clubtype.co.uk/viewports-my.html Область просмотра 1 имеет обычный шрифт, область просмотра 2 имеет курсив, поэтому оба они принадлежат к одному и тому же «семейству шрифтов». Какой бы шрифт ни был указан в окне просмотра 2, он перезаписывает шрифт окна просмотра 1. Я сталкиваюсь с одной и той же проблемой при использовании html+css, форматировании параграфа или iframe.
Есть ли способ предотвратить эту перезапись?

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

 




Custom Font Viewports


/* Define custom fonts using @font-face */
@font-face {
font-family: 'Admark Std';
src:  url('webfonts/AdmarkStd-Regular.woff2') format('woff2'),
url('webfonts/AdmarkStd-Regular.woff') format('woff');
}

@font-face {
font-family: 'Admark Std';
src: url('webfonts/AdmarkStd-Italic.woff2') format('woff2'),
url('webfonts/AdmarkStd-Italic.woff') format('woff');
}

@font-face {
font-family: 'CustomFont3';
src: url('fonts/CustomFont3.otf') format('opentype');
}

/* General styles for input viewports */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
background-color: #f4f4f4;
}

.viewport {
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
border: 2px solid #ccc;
border-radius: 8px;
background-color: #fff;
width: 600px;
}

.viewport input {
width: 100%;
padding: 10px;
margin-top: 10px;
font-size: 36px;
border: 1px solid #ddd;
border-radius: 4px;
}

/* Apply custom fonts to specific viewports */
.viewport.font1 input {
font-family: 'Admark Std', serif;
}

.viewport.font2 input {
font-family: 'Admark Std', serif;
}

.viewport.font3 input {
font-family: 'CustomFont3', sans-serif;
}




Custom Font 1:


Custom Font 2:


Custom Font 3:

Подробнее здесь: https://stackoverflow.com/questions/797 ... -viewports