blocks|key|578384|text|我只能精确地以16px+(在我的浏览器上是1em)的大小重现它，所以我怀疑像描述here和here那样的字体问题。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|578385|您可以按原样使用字体，避免使用16px，自己修复字体度量(如链接中所述)，给字体创建者发送电子邮件，或者选择不同的字体。市面上有很多好的免费字体，都是最好的:)|578386|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/2967004/why-are-my-descenders-being-cut-off-when-using-css-font-face|1|http://www.dafont.com/forum/read/8058/tops-bottoms-of-fonts-being-cut-off-how-can-i-correct-this^0|14|4|0|19|4|1|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]|$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

I can only reproduce it at exactly 16px (1em on my browser), so I suspect a font issue like the one described <a href="https://stackoverflow.com/questions/2967004/why-are-my-descenders-being-cut-off-when-using-css-font-face">here</a> and <a href="http://www.dafont.com/forum/read/8058/tops-bottoms-of-fonts-being-cut-off-how-can-i-correct-this" rel="nofollow noreferrer">here</a>.

You could use the font as-is and avoid 16px, fix the font metrics yourself (as described in the links), email the font creator, or choose a different font. Lots of good free fonts out there, all the best :)

blocks|key|577842|text|试一试|type|unstyled|depth|inlineStyleRanges|entityRanges|data|577843|line-height:+normal;|code-block|syntax|javascript|577844|好像修好了一个few+people's+problems。|offset|length|577845|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/a/699659/1156119^0|0|0|7|L|0|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@$I|V|J|W|1|X]]|A|$]]|$1|K|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|L|$M|$5|N|O|P|A|$Q|R]]]]

Try 

<pre><code>line-height: normal;
</code></pre>

Seemed to fix a <a href="https://stackoverflow.com/a/699659/1156119">few people's problems</a>.

blocks|key|4977670|text|尝试将行高增加到类似于line-height:+1.2;的值|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4977671|如果您将字体大小增加到1.1em，它不会被截断。|4977672|我建议使用像Normalize这样的CSS重置。|4977673|entityMap|0|LINK|mutability|MUTABLE|url|http://necolas.github.com/normalize.css/^0|B|H|0|0|6|9|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|U|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|V|8|@]|D|@$9|W|A|X|1|Y]]|E|$]]|$1|J|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]]]

Try increasing the line-height to something like <code>line-height: 1.2;</code>

If you bump the font size up to 1.1em, it doesn't get cut off.

I suggest using a CSS reset like <a href="http://necolas.github.com/normalize.css/" rel="nofollow">Normalize</a>.

blocks|key|577874|text|老实说，我发现修复这个错误的唯一方法似乎是改变字体大小。某些自定义字体似乎有一些错误，主要是在Chrome中。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|577875|我也遇到了同样的问题，并将字体大小从30px改为32px，现在就好了:)|offset|length|style|CODE|577876|entityMap^0|0|I|4|O|4|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|K|8|@$D|L|E|M|F|G]|$D|N|E|O|F|G]]|9|@]|A|$]]|$1|H|3|-4|5|6|7|P|8|@]|9|@]|A|$]]]|I|$]]

Honestly, the only way I've found to fix this error seems to be changing the font size. 
There seems to be a few errors with certain custom fonts, mainly in Chrome.

I had the same issue and changed the font size from <code>30px</code> to <code>32px</code> and it's fine now :)

blocks|key|577891|text|这是因为字体文件的下降值太短。下标是像p，g，q或y这样的字母。这些字母到达基线以下，所以字体文件应该包含一个大于最低下标的值。浏览器将升降值视为字体“容器”，因此它将剪切超出这些值的任何元素。正因为如此，CSS无法修复此问题，因为问题存在于字体文件本身。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|577892|为了修复它，唯一的方法是编辑字体文件并更改这些值。试着联系最初的设计者。|577893|不幸的是，这肯定会发生在免费字体上...|577894|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|H|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|I|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|J|8|@]|9|@]|A|$]]|$1|F|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|G|$]]

This is because the descender value of the font file is too short. Descenders are letters like p,g,q or y. These letters reach under the baseline so the font file should include a value greater than the lowest descender. The browser consider the ascenders and descender values to be the font "container" so it will cut any element going beyond those values. Because of this, CSS cannot fix this problem as the issue resides in the font file itself.

In order to fix it, the only way is to edit the font file and change those values. Try to reach out to the original designer.

Unfortunately, this is bound to happen with free fonts...

blocks|key|577896|text|在我的例子中：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|577897|letter-spacing:+normal;|code-block|syntax|javascript|577898|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|I|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|J|8|@]|9|@]|A|$E|F]]|$1|G|3|-4|5|6|7|K|8|@]|9|@]|A|$]]]|H|$]]

In my case:

<pre><code>letter-spacing: normal;
</code></pre>

I can't figure out why letters that drop below the line (like g and y) in my paragraph are getting cut off. I tried setting the line height higher but it still cut them off. I played with font-size in px, pt, and em but still no luck. Now when I set the font-size much larger (like 3.0em) the problem disappears. But I need the font to be about this size.

Here is the link: <a href="http://sportegy.com/font-test/font-test.html" rel="noreferrer">http://sportegy.com/font-test/font-test.html</a>

You'll need to use the link and see the .ttf font I have in order to really see the problem.
However, I'll paste my HTML here too.

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;style&gt;
@font-face {
font-family: lib-font;
src: url('css/LiberationSansNarrow-Regular.ttf');
}
@font-face {
font-family: lib-bold;
src: url('css/LiberationSansNarrow-Bold.ttf');
} 
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;

&lt;span style='font-family: lib-font;color: #232322;font-size: 1.0em;'&gt; 
The quick brown foxy was jumping over the green doggy.&lt;br/&gt;
The quick brown foxy was jumping over the green doggy.&lt;br/&gt;
The quick brown foxy was jumping over the green doggy.&lt;br/&gt;
The quick brown foxy was jumping over the green doggy.&lt;br/&gt;
The quick brown foxy was jumping over the green doggy. 
&lt;/span&gt;
</code></pre>

In CSS the Bottom Part of my Custom Fonts are Getting Cut Off (the g's and y's)

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我不明白为什么在我的段落中落在行下的字母(比如g和y)会被切掉。我试着把线条的高度调高一些，但还是把它们剪断了。我在px、pt和em中使用了font-size，但仍然没有成功。现在，当我设置更大的字体大小(如3.0em)时，这个问题就消失了。但是我需要这个大小的字体。这是链接：您需要使用链接并查看我的.ttf字体才能真正看到问题所在。但是，我也会在这里粘贴我的HTML。<html><head><s

问在CSS中，我的自定义字体的底部被截断了(g和y)
EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在CSS中，我的自定义字体的底部被截断了(g和y)EN

回答 6

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在CSS中，我的自定义字体的底部被截断了(g和y)
EN