I recently came along a font(-file) that seems to get positioned vastly different inside a span on different operating systems. If someone knowledgeable with fonts knows what exactly is going wrong here and if there is a fix or a workaround for something like this, I'd greatly appreciate it.
I've made a pen here: https://codepen.io/jls_chris/pen/rQmpEE
which should show you the basic setup of the element:
<div class="box">
<div class="wrapper">
<span class="value">24%</span>
</div>
</div>
#font-face {
font-family: 'Impact LT Std';
src: url('https://sorry.font.is.licensed/ImpactLTStd.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
.box {
height: 163px;
width: 259px;
position: relative;
z-index: 10;
// Set by gsap
opacity: 1;
transform: matrix(1, 0, 0, 1, 0, 0);
// For debugging
background-color: lightblue;
.wrapper {
height: calc(163px - 33px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
// For debugging
background-color: lightgreen;
.value {
font-family: 'Impact LT Std', Sans-Serif;
font-size: 95px;
-webkit-font-smoothing: subpixel-antialiased;
// For debugging
text-decoration: underline;
outline: 1px solid red;
}
}
}
As the font license doesn't allow me to share it, here a couple of images:
On Windows (any browser):
On Mac (any browser):
On Windows everything looks correct but on Mac the text is clearly not centered as I would expect it to be.
The span is correctly positioned on both and has the correct dimensions but the it seems like the baseline is positioned completely differently on the two OSes. I tested a couple of other fonts but could not reproduce it.
Does someone know what could be wrong/broken in this font and if there might be a fix?
elveti linked the following post (in a comment, I would accept that comment as the solution if possible): Font Rendering / Line-Height Issue on Mac/PC (outside of element) which outlines the same issue and contained the solution.
Sadly FontSquirrel was not an option as it blocks Adobe fonts. But I edited the font using FontForge as mentioned in the post by Luke: https://stackoverflow.com/a/38508202/1084239
For me none of the checkboxes were checked but the "Win ..." metrics were different than the other metrics. I copied the "Win Ascent" and "Win Descent" values into the corresponding "Typo" and "HHead" fields as my issue was that mac displayed the font incorrectly (and left all the checkboxes unchecked). After exporting the font as ttf using the default settings and ignoring any warnings, it generated a font that finally worked correctly on both mac and windows.
Related
I have a problem, the following text works when I created it in my windows computer, but when we test run it the text stays the same in windows computer, but when the website opens in safari the text is cut of how do I fix this?
The mobile works fine, it's just the desktop.
Here is the CSS Code for the text:
.header{
text-align: left;
font-size: 55px;
font-weight: bold;
font-style: italic;
height: 100%;
width: 80%;
color: #006400;
border-radius: 5px;
margin-left: auto;
margin-right: 75%;
font-family: Century Gothic,CenturyGothic,AppleGothic,sans-serif,cursive;
}
Tried checking the CSS but not sure what the problem is.
I see you're missing line-height in that CSS block, try defining that first.
If that doesn't work, I recommend looking at this thread, there are a bunch of different solutions here. Font Rendering / Line-Height Issue on Mac/PC (outside of element)
When I tried out the Calibre font on the web, I noticed the text was not centered in vertical direction properly. After researching I figured out that the descendant of the font is slightly thicker than the ascendant.
The below image is the calibre font in Figma which clearly shows that the descendant is bigger
As it was on figma it was easily corrected. But when I tried it out on the web, I faced the same problem. The text is not properly centering in the vertical direction.
I've attached the code here.
<style>
#font-face {
font-family: "calibre-semi-bold";
src: url(./calibre-semibold-webfont.ttf);
}
.text {
font-family: "calibre-semi-bold";
font-size: 6em;
}
.container {
background-color: orange;
height: 120px;
width: 70%;
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 90px;
}
</style>
<body>
<div class="container">
<p class="text">
Cutting Edge technology
</p>
</div>
</body>
After some googling, I found that actually there's a property called descent-override that can be used in #font-face which solves the problem. However, MDN mentioned that the property won't be supported on Safari and other older version browsers.
#font-face {
font-family: "calibre-semi-bold";
src: url(./calibre-semibold-webfont.ttf);
descent-override: 17%;
}
after using descent-override
The difference is very hard to notice in the image, but it's very significant on the live web.
Is there any proper way to center this text vertically without compromising on browser compatibility? Thanks.
I would add line-height: 100%; to the .text element, to set the line height to the same size as the font-size.
Apart from that you could add position:relative and use a top: ... setting (trial and error for the value) on that element to offset it vertically.
Given the following css code, the text (arrow) is vertically centered in Chrome while not in IE11, could someone tell me why and how can I achieve the same effects in IE11?
span {
display: block;
width: 2rem;
height: 2rem;
line-height: 2rem;
background: blue;
color: white;
font-size: 2rem;
}
<span>⇑</span>
Screenshots:
Chrome:
IE11:
By default, the computed font-family is Times New Roman as the inspect view shows:
However, looking through the supported unicode characters by the Times New Roman font, we find ⇑ (U+21D1)is not supported by Times New Roman. In this case, browser is free to choose which font to use, and we have no idea how the characters would be aligned (since we don't know which fallback font the browser has chosen to use internally), that causes the behavior varies from browsers.
So how to make it vertically centered? One simple method would be explicitly specifying a font-family which contains ⇑ (U+21D1), for example, Cambria
span {
display: block;
width: 2rem;
height: 2rem;
line-height: 2rem;
background: blue;
color: white;
font-size: 2rem;
font-family: Cambria;
}
<span>⇑</span>
I've used a CSS from Goolge and I'm getting puzzling result. Below are two screenshots. The one from Firefox shows the correct (or, at least, the expected rendering), the one from Chrome shows some random font...
Firefox
Chrome
This is how I load it:
<link href='http://fonts.googleapis.com/css?family=Lobster+Two:700italic'
rel='stylesheet' type='text/css'/>
The relevant CSS rule:
.digit {
font-family: 'Lobster Two', cursive;
font-size: 24pt;
background-color: #d1d2d4;
color: #ebebec;
padding-left: 5px;
padding-right: 5px;
margin-bottom: 10px;
cursor: pointer;
display: block;
float: left
}
I'm at a loss...
Following, somewhat, Fluidbyte's advice I decided to use the font file I have, rather than the one from Google's CDN and it worked. I'd still be interested to know why wouldn't it work the first time I tried, but as the practical solution (possibly only relevant to this particular font) this should help you, if you are facing the same problem.
In Firefox 3.6, IE7 and Opera 10 on Windows, this HTML has an odd behavior:
<html><head></head>
<style>
span {
font-family: monospace; background-color: green;
}
span.b {
font-weight: bold;
}
</style>
<body>
<span>Text</span><span class="b">Text</span><span>Text</span>
</body>
</html>
The bold span in the middle is shifted down by one pixel. That doesn't happen for other fonts.
Why is that? How can I fix it?
Why is that?
Excellent question. Just spent half an hour trying to figure out the why, to no avail. Marcgg's solution doesn't seem to work, either, the offset is still there. Google turns up nothing. This only seems to happen on Windows, not just in the browsers you mention, but also in Opera 9 and IE6. Not in Firefox 2.0 though. Puzzling.
How can I fix it?
The only solution that has worked so far for me is this:
span {
font-family: Courier; background-color: green;
}
span.b {
font-weight: bold;
}
I.e., specifying Courier instead of monospace. This renders consistently in all browsers I tested (IE6, Opera 9, FF 2.0 under Windows 2000; Opera 10, FF 3, and Konqueror under Ubuntu). As to why, I still have no idea.
It's just an optical effect. Grab a screenshot and zoom in: you'll see the text baseline does not change at all.
It should fix itself if you choose a different colour contrast.
Update
alt text http://img690.imageshack.us/img690/421/opticaleffect.png
The problem is the font "Courier New" which is the default font used my most Windows browsers when "monospace" is requested. For the bold variant, the baseline is at a different offset:
<html><head></head>
<style>
span {
font-family: "Courier New"; background-color: green;
}
span.b {
font-weight: bold; vertical-align:top;
}
</style>
<body>
<span>Text</span><span class="b">Text</span><span>Text</span>
</body>
</html>
With this code, you can see that the middle text is shifted up (= different baseline offset) but the background color is now aligned properly.
The solution is to request "Courier" as a font and to avoid "Courier New".