Я хочу создать такой особый стиль:
с использованием HTML и стиля иконок материалов materialize.css.
Я придумал этот html-код:
* {
font-family: sans-serif;
color: blue;
}
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<p style = "font-size: 6.5vh">
O
<i style = "font-size: 3.8vh;" class = "material-icons">bug_report</i>
<i style = "font-size: 3.8vh;" class = "material-icons">bug_report</i>
<span style = "">ps!</span>
</p>
У меня возникли проблемы, потому что "значки ошибок" не выровнены по нижней части шрифта (попробуйте сделать их больше - вы увидите). Другая проблема заключается в том, что пространство между текстом и значками слишком велико.
Я попытался добавить "margin-left: -4%" к значкам, которые работают на мобильных устройствах, но на моем рабочем столе это выглядит так:
Что касается проблемы с пробелом между символами, есть несколько способов решить эту проблему (подробности см. В здесь). Основная проблема здесь в том, что каждый перенос строки интерпретируется как пробел. Простое решение - просто не использовать разрывы строк и писать HTML в одной строке.
Для вашей второй проблемы с выравниванием значков в тексте вы можете взглянуть на здесь. В нашем примере position: relative; top: 4px;
должен выполнить эту работу.
* {
font-family: sans-serif;
color: blue;
}
.material-icons {
font-size: 3.8vh;
position: relative;
top: 4px;
}
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<p style = "font-size: 6.5vh">
O<i class = "material-icons">bug_report</i><i class = "material-icons">bug_report</i><span>ps!</span>
</p>
вы можете установить размер шрифта с помощью js.
примечание: наверное есть более удобные css решения.
var p_oops=document.getElementById('p_oops')
var bug_reports=document.getElementsByClassName('bug_report')
var main_ratio=.05;
var i_ratio=.6;
function SetFontSize(){
p_oops.style.fontSize=window.innerWidth*main_ratio+'px';
for(var i=0, len=bug_reports.length; i<len; i++)
{
bug_reports[i].style.fontSize=window.innerWidth*main_ratio*i_ratio+'px';
}
}
SetFontSize();
window.onresize=function(){
SetFontSize();
}
* {
font-family: sans-serif;
color: blue;
}
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<p id = "p_oops">
O
<i style = "font-size: 3.8vh;" class = "material-icons bug_report">bug_report</i>
<i style = "font-size: 3.8vh;" class = "material-icons bug_report">bug_report</i>
<span style = "">ps!</span>
</p>
Вы можете исправить это с помощью inline-flex
p{
display: inline-flex;
align-items: flex-end;
line-height: 1;
}
вы также можете попробовать align-items: baseline;
* {
font-family: sans-serif;
color: blue;
}
p{
display: inline-flex;
align-items: flex-end;
line-height: 1;
}
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons" rel = "stylesheet">
<p style = "font-size: 6.5vh">
O
<i style = "font-size: 3.8vh;" class = "material-icons">bug_report</i>
<i style = "font-size: 3.8vh;" class = "material-icons">bug_report</i>
<span style = "">ps!</span>
</p>