文字の上下にパディングができてしまう

pやspanで文字を打って、文字サイズを大きめにすると上下のパディングが目立ってしまいます。このパディングを無くす方法はないのでしょうか？色々なWebフォントを指定してみたのですが、いずれも上下にパディングがついてしまってだめでした。

CodePen
https://codepen.io/negishiojotan/pen/KKZQRMp

行動規範の内容に同意します

回答3件

@font-faceでアセンダーとディセンダーを調整するのはどうでしょうか。

css
1/* cyrillic-ext */
2@font-face {
3  font-family: 'Noto Sans';
4  font-style: normal;
5  font-weight: 900;
6  font-display: swap;
7  src: url(https://fonts.gstatic.com/s/notosans/v26/o-0NIpQlx3QUlC5A4PNjZhNVadyB1Wk.woff2) format('woff2');
8  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
9  ascent-override: 75%;
10  descent-override: 5%;
11}
12/* cyrillic */
13@font-face {
14  font-family: 'Noto Sans';
15  font-style: normal;
16  font-weight: 900;
17  font-display: swap;
18  src: url(https://fonts.gstatic.com/s/notosans/v26/o-0NIpQlx3QUlC5A4PNjZhNVYNyB1Wk.woff2) format('woff2');
19  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
20  ascent-override: 75%;
21  descent-override: 5%;
22}
23/* devanagari */
24@font-face {
25  font-family: 'Noto Sans';
26  font-style: normal;
27  font-weight: 900;
28  font-display: swap;
29  src: url(https://fonts.gstatic.com/s/notosans/v26/o-0NIpQlx3QUlC5A4PNjZhNVZdyB1Wk.woff2) format('woff2');
30  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
31  ascent-override: 75%;
32  descent-override: 5%;
33}
34/* greek-ext */
35@font-face {
36  font-family: 'Noto Sans';
37  font-style: normal;
38  font-weight: 900;
39  font-display: swap;
40  src: url(https://fonts.gstatic.com/s/notosans/v26/o-0NIpQlx3QUlC5A4PNjZhNVaNyB1Wk.woff2) format('woff2');
41  unicode-range: U+1F00-1FFF;
42  ascent-override: 75%;
43  descent-override: 5%;
44}
45/* greek */
46@font-face {
47  font-family: 'Noto Sans';
48  font-style: normal;
49  font-weight: 900;
50  font-display: swap;
51  src: url(https://fonts.gstatic.com/s/notosans/v26/o-0NIpQlx3QUlC5A4PNjZhNVZ9yB1Wk.woff2) format('woff2');
52  unicode-range: U+0370-03FF;
53  ascent-override: 75%;
54  descent-override: 5%;
55}
56/* vietnamese */
57@font-face {
58  font-family: 'Noto Sans';
59  font-style: normal;
60  font-weight: 900;
61  font-display: swap;
62  src: url(https://fonts.gstatic.com/s/notosans/v26/o-0NIpQlx3QUlC5A4PNjZhNVa9yB1Wk.woff2) format('woff2');
63  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
64  ascent-override: 75%;
65  descent-override: 5%;
66}
67/* latin-ext */
68@font-face {
69  font-family: 'Noto Sans';
70  font-style: normal;
71  font-weight: 900;
72  font-display: swap;
73  src: url(https://fonts.gstatic.com/s/notosans/v26/o-0NIpQlx3QUlC5A4PNjZhNVatyB1Wk.woff2) format('woff2');
74  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
75  ascent-override: 75%;
76  descent-override: 5%;
77}
78/* latin */
79@font-face {
80  font-family: 'Noto Sans';
81  font-style: normal;
82  font-weight: 900;
83  font-display: swap;
84  src: url(https://fonts.gstatic.com/s/notosans/v26/o-0NIpQlx3QUlC5A4PNjZhNVZNyB.woff2) format('woff2');
85  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
86  ascent-override: 75%;
87  descent-override: 5%;
88}
89
90span {
91  font-family: 'Noto Sans', sans-serif;
92  font-size: 200px;
93  background-color: red;
94  padding: 0px;
95}

投稿2022/04/06 03:43

Lhankor_Mhy

総合スコア36134

手っ取り早いのは文字を囲っている要素にline-heighを適用するコトだと思います。
spanなどのインライン要素であれば、display: inline-block;を適用させてください。
あとはフォントによってpaddingで上下の調整してください。
※ただしこれは数字のみです。

サンプルのspanであれば以下を適用させればご要望の形には近くなると思います。

css
1span {
2  font-family: 'Noto Sans', sans-serif;
3  font-size: 200px;
4  background-color: red;
5  display: inline-block;
6  line-height: 0.8;
7  padding-bottom: 8px;
8}

投稿2022/04/06 07:35

編集2022/04/06 07:44

kinchannel

総合スコア111

他の文字とのバランスがあるのでやめたほうがよいでしょう
ある程度までならこんな感じで

CSS
1<style>
2span {
3 font-family:monospace;
4  font-size: 200px;
5background-color: red;
6display:inline-block;
7margin:0;padding:0;
8line-height:200px;
9}
10</style>
11<span>01yj~^</span>