I am struggling to understand why certain letters, like 'g' and 'y', are being cut off when they drop below the line in my paragraph. I have tried adjusting the line height, experimenting with different font sizes in pixels, points, and ems, but nothing seems to work. Interestingly, when I increase the font size significantly (e.g., 3.0em), the issue disappears, but that's not the ideal font size I need.
To see the problem for yourself, please visit this link:
In order to truly grasp the issue, you may need to view the .ttf font I am using from the provided link.
<html>
<head>
<style>
@font-face {
font-family: lib-font;
src: url('css/LiberationSansNarrow-Regular.ttf');
}
@font-face {
font-family: lib-bold;
src: url('css/LiberationSansNarrow-Bold.ttf');
}
</style>
</head>
<body>
<span style='font-family: lib-font;color: #232322;font-size: 1.0em;'>
The quick brown foxy was jumping over the green doggy.<br/>
The quick brown foxy was jumping over the green doggy.<br/>
The quick brown foxy was jumping over the green doggy.<br/>
The quick brown foxy was jumping over the green doggy.<br/>
The quick brown foxy was jumping over the green doggy.
</span>