figma 的 html/css 中显示的文本格式不正确
Posted
技术标签:
【中文标题】figma 的 html/css 中显示的文本格式不正确【英文标题】：incorrect text format from showing in html/css from figma 【发布时间】：2020-10-14 10:12:36 【问题描述】：在 Figma 中，我有一个显示以下代码的文本设计：
/* Create Account */
position: absolute;
width: 343px;
height: 142px;
left: 575px;
top: 272px;
font-family: Montserrat;
font-style: normal;
font-weight: bold;
font-size: 30px;
line-height: 37px;
display: flex;
align-items: center;
text-align: center;
color: rgba(255, 255, 255, 0.92);
但是，当我在 html 中有以下代码时（文本具有与 Figma 指示的相同字体，文本的字体在 html/css 中与在 figma 中显示的两个图像所示不同）已附上（请忽略不同的背景）：
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body style="margin: 0 auto;text-align:center;background: #141E30; /* fallback for old browsers */ background: -webkit-linear-gradient(to bottom, #243B55, #141E30); /* Chrome 10-25, Safari 5.1-6 */ background: linear-gradient(to bottom, #243B55, #141E30); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */;">
<p style="font-family: Montserrat; font-style: normal; font-weight: bold; color: rgba(255, 255, 255, 0.92);font-size: 30px;">Create Account</p>
</body>
</html>
有人知道为什么我不能在 html/css 中重新创建完全相同的字体外观吗？
Figma 设计： HTML/CSS：
【问题讨论】：
在你的 HTML 中，body 高度只有 94 px，因此背景是重复的。应用相应的高度，看看差异。 抱歉那是哪一行？ 考虑将html min-height: 100% 添加到您的CSS。是的，字体应该被显式加载。
好的，谢谢，那行得通。是否有特定的背景我需要这个，或者我通常应该总是有 html min-height: 100% ？
取决于您需要的布局。在这种特殊情况下，根据需要（从页面的最底部）应用渐变非常重要。请记住，高度的默认值为auto - 即“与包含元素要求的一样高”。
【参考方案1】：
添加 HTML 头部：
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800&display=swap" rel="stylesheet">
在 Css 中添加：
font-family: 'Montserrat', sans-serif;
【讨论】：
干杯，html头中的链接工作正常，不需要无衬线位。只是好奇使用第二种字体的目的是什么？ 还有一个链接可以用来导入所有/多种字体吗？ 其他字体可以使用google字体https://fonts.google.com/
'Montserrat' 是家族名称，sans-serif 是通用家族。从您想要的字体开始，并始终以通用系列结尾，以让浏览器在通用系列中选择类似的字体（如果没有其他字体可用）。以上是关于figma 的 html/css 中显示的文本格式不正确的主要内容，如果未能解决你的问题，请参考以下文章
如何在 div 框中显示来自 javascript innerhtml 的文本输出，而不会导致文本溢出并且具有 html/css 样式