时间戳

首页 > 解决方案 > 在@font-face 中添加行高

css - 在@font-face 中添加行高

问题描述

有什么方法可以line-height代替@font-face, :root, body, & 其他元素添加*吗？div

我在网络应用程序中使用了多种字体。例如，我们使用了 Lato & Roboto 字体。如果应用 Lato 字体我需要给line-height: 1.4em，如果应用 Roboto 字体我需要给line-height: 1.6em。有什么方法可以添加line-height或@font-face任何其他技巧吗？

* {
  margin: 0;
  padding: 0;
}

@font-face {
  font-family: myFont;
  src: url(https://fonts.gstatic.com/s/tangerine/v11/IurY6Y5j_oScZZow4VOxCZZMprNA4A.woff2) format('woff2');
  font-weight: 400;
  font-style: normal;
  line-height: 40px;
}

div {
  font-family: myFont;
  font-size: 32px;
}
<div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<br/><br/><br/>
<p>
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only
</p>

标签： cssfontsfont-face

解决方案

你可以做的是：

font : (font-size)/(line-height) (font-family)

这一行相当于：

font-size : ....
line-height:....
font-family:....

你仍然需要使用 src

推荐阅读