typography 相关问题

考虑以下代码（包含在块级中的内联）：你好 <... 考虑以下代码（包含在块级中的内联）： <div> <span style="font-size:40px;line-height:3px;">HELLO</span> </div> 这将导致的高度为 19px。浏览器是如何得出 19px 这个值的？以下代码片段是正在运行的代码： <!doctype html> <html lang="en" style="font-family:'Arial';"> <head> <meta charset="utf-8"/> <title>Line-Height Test</title> </head> <body style="padding-top:50px;padding-right:calc(100% - 300px);"> <div id="greenDiv" style="background-color:lightgreen;"> <span style="font-size:40px;line-height:3px;">HELLO</span> </div> <div id="infoDiv" style="margin-top:20px;"></div> <script> (() => { const infoDiv = document.getElementById("infoDiv"); const greenDiv = document.getElementById("greenDiv"); let html = `The inner <span> is ${greenDiv.firstElementChild.offsetHeight}px tall,`; html += ` but its container (the outer green <div>) is only ${greenDiv.offsetHeight}px tall.`; html += `<br/>How did the browser arrive at this ${greenDiv.offsetHeight}px value?`; infoDiv.innerHTML = html; })(); </script> </body> </html> 为了更好地理解，使 line-height 等于 0，您将获得等于 18px 的 div 高度。 div 的默认 font-size 等于 16px，默认 line-height 等于 normal。 normal 值基于字体，在本例中，它似乎等于 1.125 以获得 18px = 1.125 * 16px <!doctype html> <html lang="en" style="font-family:'Arial';"> <head> <meta charset="utf-8"/> <title>Line-Height Test</title> </head> <body style="padding-top:50px;padding-right:calc(100% - 300px);"> <div id="greenDiv" style="background-color:lightgreen;"> <span style="font-size:40px;line-height:0;">HELLO</span> </div> <div id="infoDiv" style="margin-top:20px;"></div> <script> (() => { const infoDiv = document.getElementById("infoDiv"); const greenDiv = document.getElementById("greenDiv"); let html = `The inner <span> is ${greenDiv.firstElementChild.offsetHeight}px tall,`; html += ` but its container (the outer green <div>) is only ${greenDiv.offsetHeight}px tall.`; html += `<br/>How did the browser arrive at this ${greenDiv.offsetHeight}px value?`; infoDiv.innerHTML = html; })(); </script> </body> </html> 现在，如果您开始增加跨度的line-height，则 div 的高度将由于垂直对齐而增加。这有点棘手，因为我们需要一些复杂的计算来确定最终高度，但如果将跨度的对齐方式更改为与 baseline（默认对齐方式）不同的值，则高度将返回到 18px，无论 line-height <!doctype html> <html lang="en" style="font-family:'Arial';"> <head> <meta charset="utf-8"/> <title>Line-Height Test</title> </head> <body style="padding-top:50px;padding-right:calc(100% - 300px);"> <div id="greenDiv" style="background-color:lightgreen;"> <span style="font-size:40px;line-height:18px;vertical-align: top">HELLO</span> </div> <div id="infoDiv" style="margin-top:20px;"></div> <script> (() => { const infoDiv = document.getElementById("infoDiv"); const greenDiv = document.getElementById("greenDiv"); let html = `The inner <span> is ${greenDiv.firstElementChild.offsetHeight}px tall,`; html += ` but its container (the outer green <div>) is only ${greenDiv.offsetHeight}px tall.`; html += `<br/>How did the browser arrive at this ${greenDiv.offsetHeight}px value?`; infoDiv.innerHTML = html; })(); </script> </body> </html> 我使用 line-height: 18px 进行顶部对齐，总高度仍然是 18px。如果我增加跨度的line-height，高度也会增加。如果更新对齐方式，高度也会增加。总而言之，div 的 line-height 和 font-size 将设置最小高度。这个最小高度可以通过内部元素的 line-height 及其垂直对齐来更改。

html css typography line-height

回答 1 投票 0

使用 Tailwind 防止孤立词？

CSS（特别是 Tailwind）中是否有一种方法可以防止文本块中出现孤立单词？我可以通过一个来实现这一点，但我相信他们是一个 CSS 解决方案。这是我的文字... CSS（特别是 Tailwind）中是否有一种方法可以防止文本块中出现孤立单词？我可以用   来实现这一点，但我相信他们是一个 CSS 解决方案。 <p>This is my text that I dont want an orphaned word for</p> 您可以使用例如： <p>This is my text that I don't want an orphaned <span style="white-space: nowrap ;">word for</span></p> 或者 <p>This is my text that I don't want an orphaned <span class="nowrap">word for</span></p> 使用 CSS，例如： span.nowrap { white-space: nowrap ; }

tailwind-css typography

回答 1 投票 0

Flutter/Dart：更改字符串中特定 unicode 字符的颜色

我是 Flutter 新手，正在尝试编写代码来更改字符串中特定 Unicode 字符的颜色。颜色编码 \u0951、\u0952 和 \u1cda 表示蓝色、红色和绿色。输出字符串不匹配...

flutter dart typography text-rendering indic

回答 1 投票 0

仅使用 CSS 拉伸字体

我怎样才能让我的字体像上面的CSS图片一样只提供给我代码任何人请

css user-interface responsive-design typography

回答 1 投票 0

在 SCSS 脚本中更改粗体颜色

我是一个初学者，正在努力完成在预先编写的 scss 文件中更改粗体文本颜色的基本任务。我只是找不到明显的解决方案。 API 似乎预定义了颜色参数，我想...

css sass colors webfonts typography

回答 2 投票 0

Space Mono字体转换</ to an arrow

我一直在尝试为我的终端/neovim 设置使用 Space Mono 字体，但我遇到了一个奇怪的问题我一直在尝试为我的终端/neovim 设置使用 Space Mono 字体，但我遇到了一个奇怪的问题from fonts.adobe.com 我希望能够手动删除此效果...不知何故，因为显然任何 XML/HTML 开发都令人讨厌/不可能进行该渲染。即使我不能，我也想知道为什么会这样。起初我以为是终端设置的问题，但我输入了

terminal typography

回答 0 投票 0

如何在 JavaScript 中完成拉伸希伯来字形的 Sefer Torah 布局？

这里描述了我所指的 Sefer Torah 布局，它看起来像这样（我无法快速找到更好的图像）：基本上，你会注意到一些“水平字母......

html css fonts hebrew typography

回答 1 投票 0

如何从画布中的文本中获取特定字符数据？（在 MultiDir 中很重要：RTL / LTR 字符串）

我有多目录文本，我想要标记或选择一些字符（用于示例最后一个字符）示例字符串：“معنی Hello سلام است یا Salam” 一些字符从 Left 扩展文本，一些字符扩展到...

javascript html canvas typography register-transfer-level

回答 1 投票 0

在这个约定中而不是 H1 - H6 中移交开发排版规范可以吗

作为 UX/UI 设计师，H1 - H3 的特定尺寸会导致问题，因此我更喜欢使用图像左侧显示的系统。这是切换中的问题吗？它创造了更大的灵活性。谢谢我