Значок шрифта - высота значка больше, чем ожидалось

Я использую шрифт значка, созданный fontastic.me в моем проекте. Однако все значки немного выше, чем ожидалось.Значок шрифта - высота значка больше, чем ожидалось

Отрывок здесь:

.icon-camera { 
 
    font-size: 40px; 
 
    background: #ff0000; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
    <link href="https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/icons.css" rel="stylesheet"> 
 
</head> 
 
<body> 
 
    <span class="icon-camera"></span> 
 
</body> 
 
</html>

Что может вызвать этот эффект, и как я могу избавиться от него?

источник

2014-09-27 Tamás Pap

Это вопрос о высоте линии. Неясно о других глифах в наборе символов, но, используя ваш пример, этот CSS-код, который использует line-height: 50%;, display: inline-block; и position: relative;, кажется, работает. Моя единственная забота - line-height: 50%; действительно только для примера, который вы показываете. Таким образом, глифы разной высоты могут просто нуждаться в других значениях. Но эксперимент, чтобы убедиться, что это работает для вас или если концепция показывает более гибкое решение.

.icon-camera { 
 
    font-size: 40px; 
 
    background: #ff0000; 
 
    line-height: 50%; 
 
    display: inline-block; 
 
    position: relative; 
 
}

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <title>JS Bin</title> 
 
    <link href="https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/icons.css" rel="stylesheet"> 
 
</head> 
 
<body> 
 
    <span class="icon-camera"></span> 
 
</body> 
 
</html>

источник

2014-09-27 14:39:08 JakeGould

Если вы хотите делать то, что им будет сказать вам, то вы должны сделать icons.css файл в автономном режиме. Я имею в виду не ссылаться на <link rel= ... и использовать его между <style></style> в части head. В файле:

https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/icons.css

Вы можете увидеть этот код:

@font-face { 
    font-family: "app-icons"; 
    src:url("https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/fonts/1411745016.eot"); 
    src:url("https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/fonts/1411745016.eot?#iefix") format("embedded-opentype"), 
    url("https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/fonts/1411745016.woff") format("woff"), 
    url("https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/fonts/1411745016.ttf") format("truetype"), 
    url("https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/fonts/1411745016.svg#1411745016") format("svg"); 
    font-weight: normal; 
    font-style: normal; 
}

Вы должны добавить этот font-size:small Это должно выглядеть следующим образом:

@font-face { 
    font-family: "app-icons"; 
    src:url("https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/fonts/1411745016.eot"); 
    src:url("https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/fonts/1411745016.eot?#iefix") format("embedded-opentype"), 
    url("https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/fonts/1411745016.woff") format("woff"), 
    url("https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/fonts/1411745016.ttf") format("truetype"), 
    url("https://fontastic.s3.amazonaws.com/FsVBbT8KX9p5tE8xXk4xmE/fonts/1411745016.svg#1411745016") format("svg"); 
    font-weight: normal; 
    font-style: normal; 
    font-size: small; 
}

источник

2014-09-27 14:41:48 HatchU

Font Потрясающие разработала решение справиться с этой проблемой. Я отразил их решение, создав новый класс под названием «.icon» в моем файле font.css. Кажется, что он хорошо работает и с Fontastic. (Убедитесь, что вы добавили свой шрифт, где у меня есть «ваш-значок-шрифт здесь»).

.icon { 
    display: inline-block; 
    font: normal normal normal 14px/1 "your-icon-font-here"; 
    font-size: inherit; 
} 

<i class="icon icon-tag"></i>

источник

2016-06-06 19:21:50

OP, пожалуйста, примите этот ответ! Это единственная вещь в Интернете, которая решает эту проблему, ошеломляющую! – Cabus

Значок шрифта - высота значка больше, чем ожидалось

ответ

Смежные вопросы