I have three of fonts I may use together on a single line. (Emojis I wrap in <span>
and set the emoji font-family since Inter has its own characters for some glyphs like heart.) Iβve found the ascent/descent (ascent: 2728, descent: 680) for Inter and set ascent-override
and descent-override
for all fonts so they match Inter. That way if the three fonts are used on the same line their vertical layout is consistent and background-color
s (from highlights) are consistent.
@font-face {
font-family: 'Fira Code';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url(https://fonts.gstatic.com/s/firacode/v22/uU9NCBsR6Z2vfE9aq3bh3dSDqFGedA.woff2) format('woff2');
ascent-override: 100%;
descent-override: 19.953%;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url(https://fonts.gstatic.com/s/inter/v13/UcC73FwrK3iLTeHuS_fvQtMwCp50KnMa1ZL7W0Q5nw.woff2) format('woff2');
ascent-override: 100%;
descent-override: 19.953%;
}
@font-face {
font-family: Emoji;
src:
local("Apple Color Emoji"),
local("Segoe UI Emoji"),
local("NotoColorEmoji"),
local("Noto Color Emoji"),
local("Segoe UI Symbol"),
local("Android Emoji"),
local("EmojiSymbols");
ascent-override: 100%;
descent-override: 19.953%;
}
p {
font-size: 100px;
}
.inter {
font-family: Inter;
background-color: tomato;
}
.fira-code {
font-family: Fira Code;
background-color: tomato;
}
.emoji {
font-family: Emoji;
background-color: tomato;
}
<p>
<span class="emoji">π</span><span class="inter"> foo</span><span class="fira-code">bar</span>
</p>
But Safari doesnβt support ascent-override
and descent-override
(tracking bug). This is causing some unfortunate layout bugs in Safari.
Chrome:
Safari:
Is there a way for me to workaround this lack of ascent-override
/descent-override
support?
For instance, by creating my own font files that set the right ascent and descent values so they’re consistent even in Safari. I know I can find Apple’s color emoji file at /System/Library/Fonts/Apple Color Emoji.ttc
on MacOS but don’t know how to modify that file or Fira Code to get the results I want. I also don’t know enough about the font file format to know if a modification like this is possible.
Coincidentally, it looks like Apple Color Emoji and Fira Code have the same ascent/descent proportions so to simplify the problem I could just get a modified Inter file.
2
Answers
One approach is to use relative positioning to adjust the vertical alignment of elements within the line. We can calculate the height of the ascenders and descenders of each font and then use CSS to position them accordingly.
Here’s how you can implement this solution:
Adjust the margin-top values ββfor each font to match the spacing, spacing, and ascending values ββof the emoji.
This solution should provide consistent vertical alignment across different fonts without relying on browser-specific features like ascent-override and descent-override. It is more robust and easier to maintain than modifying font files directly.
The easiest solution was to set for
span { display: inline-block; vertical-align: middle; line-height: 1.4; }
:But, if you want it to work only on Safari, then you have to check
ascent-override
support with js, something like this: