I'm experiencing issue with Pacifico font, which is available in Google Fonts. This issue is happening only in Chrome and Safari, other browsers are okay.
Example:
http://jsfiddle.net/dRcaB/5/
The problem is that the D character is cropped on the left hand side. If I add some padding-left, it displays correctly. This is happening only with the Pacifico font.
What's wrong?
HTML:
<div class="pacifico">Deli D</div>
<div class="pacifico padding">Deli D</div>
<div class="damion">Deli D</div>
CSS:
#import url(http://fonts.googleapis.com/css?family=Pacifico);
#import url(http://fonts.googleapis.com/css?family=Damion);
.pacifico, .damion {
background: red;
margin-bottom: 20px;
}
.pacifico {
font-family: "Pacifico";
font-size: 60px;
}
.padding {
padding-left: 10px;
}
.damion {
font-family: "Damion";
font-size: 60px;
}
i also facing same problem but its browser rendering issue. when you select the character you will understand how browser gives space for the character.
the only patch to solve this issue is use overflow: visible && padding property to its parent DOM ELEMENT.
Related
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.
I am trying to draw a text-based GUI in HTML (just for fun) which looks like an old terminal app and I have ran into a problem:
When I have two lines (divs) and I put graphic characters in them like these:
░░░
░░░
I can't align the lines properly (vertically). If I just put terminal characters in my divs like this:
<div class="line">░█║▄▀</div>
<div class="line">░█║▄▀</div>
there is a little spacing between them. (probably height/line-height issue).
If I style them like this:
.line {
height: 1em;
line-height: 1em;
}
they overlap. I tried to fine-tune the values by hand but it seems that height and line-height does not work together well for example with font-size: 40px and line-height: 40px I have to use a height value of 45.5px. What is the problem with my approach? Is there a simple way to align my lines without fine-tuning?
Note that I zeroed all spacings/margins/paddings and I also checked the calculated css in developer tools so it is not an issue with either of these.
My base css is this:
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Source Code Pro', monospace;
}
I'd add font-family: monospace at least, see fiddle.
But to be honest I'd go with a pre tag and if neccesary spans - and not do line by line div.
I've tested this on the edge browser. I don't know what will happen on other browsers.
Bare in mind that for smaller font sizes (under .5em), some glyphs may become obscured based on monitor resolution, browser, and size.
<!DOCTYPE html>
<html>
<head>
<title>page title</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: 'Source Code Pro', monospace;
}
.line {
/* height: 1em; */
/* line-height: 1em; */
font-size: 5em;
}
</style>
</head>
<body>
<div class="line">░█║▄▀</div>
<div class="line">░█║▄▀</div>
</body>
</html>
I'm using the following HTML and CSS to create elements which are tightly together in a 100% space (floating?).
<div class="wrapper">
<div class="image">This is image</div>
<div class="content">This is content</div>
</div>
.wrapper {
font-size: 0;
}
.image, .content {
display: inline-block;
box-sizing: border-box;
width: 50%;
color: #000;
font-size: 18px;
}
.image {
background: #f6f6f6;
}
JSFiddle.
Endresult: Chrome top, Safari for Windows bottom
This style works great on all browsers - except Safari for Windows. I'm not sure about the "real" Safari but my iPad seems to work fine. Is this an issue I should be worried about?
In Safari for Windows, setting the width to:
width: 49.7%;
will give the result you are looking for.
You can detect the browser and then apply the style just to Safari for Windows.
See here for how to detect Safari for Windows:
Detection for Safari Windows with Javascript
I've taken to using rem's to size fonts in recent projects, then using px as a fallback for older versions of IE.
I've also been setting a font-size of 62.5% on thehtml so I can more easily set font sizes later on in the stylesheet, I then set a font-size of 1.4rem on the body so unstyled elements have a base font-size of at least 14 pixels, see the code below:
html { font-size: 62.5%; } /* font-size: 62.5% now means that 1.0 rem = 10px */
body { background: #fff; font-family: arial; font-size: 1.4rem; line-height: 1.6rem; }
The problem is, Chrome seems to handle this in a strange way ... Chrome seems to set the font sizes correctly on the inital page load, but on subsequent refreshes the font sizes are way bigger than they should be.
SEE FIDDLE (HTML copied below for future reference)
<!DOCTYPE html>
<html lang="en-GB">
<head>
<title>Page Title</title>
</head>
<body>
<p>This is a test, this font should have font-size of 14px.</p>
<p>This is a test, this font should have font-size of 14px.</p>
<p>This is a test, this font should have font-size of 14px.</p>
</body>
</html>
Remember, you might need to hit run once or twice in Chrome to see said effect.
Does anybody know what is causing this or if there's a way around it? Am I committing a crime by setting a 62.5% font-size on the html element (I realise there are arguements against doing so)?
The easiest solution that I have found is to simply change the body definition to
body {
font-size: 1.4em;
}
Because it is the body, you don't have to worry about compounding – just use rems everywhere else.
Try:
html { font-size: 62.5%; } /* font-size: 62.5% now means that 1.0 rem = 10px */
*{font-size: 1.4rem;line-height: 1.6rem; }
body { background: #fff; font-family: arial; }
Seems to look better on refreshing the page :)
FIDDLE
Yes, this is a known bug in Chrome, which has been linked already.
I found
html { font-size: 100%; }
seems to work for me.
The * selector is very slow, as the author of this bug in Chrome, I'd advise a workaround like this until the bug is fixed:
body > div {
font-size: 1.4rem;
}
Provided you always have a wrapper div anyway ;)
This seems to be a Chrome bug; see Issue 319623: Rendering issue when using % + REMs in CSS, and/or a partly-merged duplicate: Issue 320754: font-size does not inherit if html has a font-size in percentage, and body in rem
The answer of Patrick is right.
We have the same issue on Android 4.4.3 WebView.
Before:
html {
font-size: 62.5%;
}
body {
font-size: 1.6rem;
}
After:
html {
font-size: 62.5%;
}
body {
font-size: 1.6em;
}
With em and not rem, it works !
The way I fix this is by setting an absolute font-size in the body-element. For all the other font-sizes I use rem:
html {
font-size: 62.5%;
}
body {
font-size: 14px;
}
.arbitrary-class {
font-size: 1.6rem; /* Renders at 16px */
}
I have a minor CSS problem, but I'm having trouble fixing it because I don't have any computer handy with IE7 installed...
In IE8, Chrome, FF, etc. I see this (correctly):
but IE7 gives me this:
the HTML code follows:
<div id="hub">
<div class="title highlight">Faster, Cheaper, Better</div>
<p>PNMS...
the relevant CSS code follows:
#hub {} /* literally nothing */
#hub div.title {
font-size: 4em;
font-style: italic;
font-variant: small-caps;
float: left;
margin: 5px 0px 20px 0px;
width: 940px; /* same as parent container */
}
.highlight { color: #ff6633;}
p {
text-indent: 30px;
font-size: 1.3em;
line-height: 1.1em;
letter-spacing: 1px;
margin: 5px;
}
Based on visitor traffic, I need my site to be compatible with IE7 (thankfully NOT IE6). But again, guessing blindly and then running browsershots.org is not a very efficient manner.
Can someone help? Thank you.
Found this somewhere, it may help:
CSS Double padding IE7 Fix
"Nothing is more annoying than finishing a web design, having it dispay just the way you like it in your standards compliant browser (cough download Firefox) only to remember to check it in IE and find it a garbled mess. Today I came across a rather annoying CSS bug in IE7. IE7 doubles the top padding on my navigation menu."
CSS Code
#nav {
clear: left;
padding: 16px 0 0 30px;
}
"And the fix…
Just add display: inline-block to the div with double padding. That’s it… I know, it’s ridiculous."
#nav {
clear: left;
display: inline-block;
padding: 16px 0 0 30px;
}
Another alternative is the parent of the Div which is not displaying correct add the margin: 0 in CSS for it.
Found it. The CSS body tag had a line-height: 18px;
For some reason known only to Microsoft, out of IE7, IE8, IE9, Firefox 3.5~6, and Chrome, only IE7 honored that instruction for a deeply nested div 400 lines further down the CSS sheet.