I made my own icon font and looks perfect in any browser from OS X:
But is shown with a vertical offset in any browser from MS Windows PC:
In this last example (from PC) the glyph appears below its element box (out of its natural box).
Is a span element:
<span class="sin-avatar circle s s-pluma-6"></span>
with a ::before pseudo element:
.s-pluma-6::before {
content: "\EA2F";
}
.s::before {
display: inline-block;
font-family: iconfont;
font-style: normal;
font-weight: 400;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
There is a live example here (scroll to down):
https://stage.soux-calvo.online/
I'm going crazy, modifying CSS in many ways with no success.
Any suggestion will be appreciated. Thank you.
I found the bug. It was in the font build process (with gulp sketch). Some icons, I don't know why, was spoiling the font. Removing that icons, bug fixes.
Related
From the images below, you can see that the font rendering used by safari adds some white lines to some characters. This occurs in Safari for both iOS and Mac. While in the example below it is not as noticeable, in practice it can be quite distracting.
I noticed this happened after I added font-weight: 400; to my text. The reason I added it was to fix another issue by Safari which rendered by font with large kerning between letters see this Stack Overlow question.
This is the entire CSS for the text:
h2 {
font-family: 'My-Font', sans-serif;
font-size: 3.5em;
line-height: 1.2em;
margin-bottom: 0.5em;
text-align: center;
}
Is this another bug in Safari and is there a workaround if so? Thanks.
Some folks recommend
text-rendering: optimizeLegibility;
Other
transform: perspective(1px);
Hope it helps.
Does anyone have a good stylesheet snippet for making FontAwesome and the Material-Design icon font work well together spatially - to make Material-Design icons play well in a mostly FontAwesome site? The styles, baselines, widths are different - maybe more. The stock "material-icons" CSS class fixes the font-size at 24px. Also, the effective baseline for the Material-Design icons is far above the text baseline.
So far I've patched Google's "material-icons" CSS class with:
{
font-size: 150%;
transform: translate(-10%,20%);
}
The Material-Design icons are also wider than the Font-Awesome set - I haven't decided how to address that yet. I haven't used many icons - there may be more issues with ones I haven't tried.
I use the following code for use in navbars, buttons, wells, accordions, forms and a few other places, change it to suit your needs (you may want it perhaps bigger or thicker)
.material-icons {
font: normal normal normal 16px/1 'Material Icons';
display: inline-block;
transform: translateY(10%);
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: 'liga';
}
Better use
font-size: 115%;
vertical-align: text-bottom;
transformations make problems when you use line-height larger than 1
I had exactly the same issue of the two fonts just not playing together nicely at all!
No matter what I tried I could not fix this using CSS - each suggestion worked at first but broke down when using different font-sizes etc.
The closest I got with CSS was this:
.material-icons:before {
position: relative;
top: 0.135em;
}
In the end though, I used font forge to edit the actual font baseline and now it works a treat.
I also remapped the font into the same structure as Font Awesome so instead of:
<i class="material-icons">alarm_on</i>
I can do
<i class="md md-fw md-alarm-on"></i>
Not how the font was intended to be used and personal preference I know, but I much prefer this way of using icon fonts!
I have a problem with fonts, because they don't render same on Windows and on OS X. On Windows, characters are vertically aligned in line, but on OS X, the characters are positioned much closer to top of the line.
I highlighted the text in screenshots so you can see the difference.
I am using font Gotham. Any ideas? Do I have to use browser-specific hacks or is it a font issue?
Link to JSFiddle: http://jsfiddle.net/wewo/myh4amud/
body {
font-family: 'Gotham', Arial, sans-serif;
background-color: #282828;
font-size: 14px;
font-weight: normal;
}
div {
color: white;
font-size: 5em;
padding-top: 15px;
padding-bottom: 6px;
line-height: 1em;
}
<div>3</div>
Thank you!
The problem is in process converting or generating webfont font.
I use tool Font Squirrel for convert correct, with this option EXPERT... :
If don't work with Google Font, download him and send for convert.
Problem with Win Ascent and HHead Ascent fields in font. Windows use Win,
mac - HHead. Use FontForge for edit this.
I have a simple svg (drawn by me in illustrator), which I am trying to convert to a webfont (together with other svg's). When I open an svg in an editor I see it correctly (black pawn shakes a hand with a white pawn). The same way if I am converting it to png.
But after I converted it to a webfont with grunt webfont
webfont: {
icons: {
src : 'path/svg/*.svg',
dest : 'path/fonts',
destCss : 'path/css',
options : {
autoHint: false,
font : 'icons',
hashes : false
}
}
}
But in the webfont it looks really strange (everything is transparent except of the outline)
Here is an example of my webfont and css generated for it:
#font-face {
font-family: 'icons';
url('font/icons.woff') format('woff'),
font-weight: normal;
font-style: normal;
}
.icon {
font-family: 'icons';
display: inline-block;
vertical-align: middle;
line-height: 1;
font-weight: normal;
font-style: normal;
speak: none;
text-decoration: inherit;
text-transform: none;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon_draw:before {
content: '\f103';
}
I have high belief that the problem is with my svg (all other fonts look nice: some of them are mine and some taken from other sources). But I have no idea what is wrong.
P.S. I tried to include all relevant and not relevant details, but if you need something else (or I forgot something else) please let me know.
I am not familiar with grunt-webfont, so the following is just an educated guess.
SVG defines that the fill property defaults to black. Your black pawn has no defined fill, so it is defaulting to black when rendered in a proper SVG renderer.
However my guess is that the SVG to webfont converter utility does not appreciate that rule and is only looking at the properties defined on the shape itself. If I am right, explicitly setting the fill to black on the black pawn body shape may fix your problem.
Also I noticed that the way you have done the arm of the black pawn is a little strange. You have made a piecemeal shape and filled it by drawing a whole lot (25 by my count) of thick short strokes. Font renderers expect glyphs to be defined using closed filled shapes. Not doing it that way may cause problems. Ideally the arm should be a single filled shape. On the other hand, it may work perfectly fine.
I use custom font in my CSS with this method:
#font-face {
font-family: 'Gabriola';
src: url('Gabriola.eot');
src: url('Gabriola.eot?#iefix') format('embedded-opentype'),
url('Gabriola.woff') format('woff'),
url('Gabriola.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.gabriola {
font-size: 20px;
line-height: 20px;
height: 20px;
background: red;
}
<div class="gabriola">Some texty text here</div>
Each browser renders this fonts by it's own way with vertical offset top and bottom like this
What am I doing wrong? Thanks
I know it's been 5 years since the OP asked the question, but I found this great technique on getting text baseline-aligned correctly.
Basically, the text container must be an inline-block with line-height: 0;
Then, you create an inline-block pseudo-element and set its height according to the line-height you wanted:
span {
font-size: 2em;
background: red;
}
span.baseline-align {
vertical-align: baseline;
}
span.true-baseline-align {
display: inline-block;
line-height: 0;
}
span.true-baseline-align::after {
content: '';
display: inline-block;
height: 1em; // this is where you control line-height
}
<span>Normal text</span>
<br><br>
<span class="baseline-align">With vertical-align: baseline</span>
<br><br>
<span class="true-baseline-align">with trick to really baseline-align</span>
http://blogs.adobe.com/webplatform/2014/08/13/one-weird-trick-to-baseline-align-text/
It's possible there is not anything you are doing wrong. Here are some points that may apply, some controllable by you, some not.
Just to be sure, explicitly set vertical-align: baseline.
The different files (.eof, .woff, .ttf) themselves may not be defined the same, and thus different browsers are using different files and displaying differences.
Not sure if having two src calls is messing things up, but you can try eliminating the second one:
#font-face {
font-family: 'Gabriola';
src: url('Gabriola.eot'),
url('Gabriola.eot?#iefix') format('embedded-opentype'),
url('Gabriola.woff') format('woff'),
url('Gabriola.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
These are all mere guesses. You will have to test #1, 3. If the issue is #2, I'm not sure there is an elegant solution.
There is, of course, the caveat on this site:
Keep in mind that font rendering can vary widely across browsers and
operating systems. Many developers have experienced such poor results
from Windows and Internet Explorer that they avoid using custom fonts
altogether. Always be sure to examine your results closely on all the
browsers that you can to decide if the quality is acceptable.
Update
This post gives some tips about possibly resolving rendering issues. This is for Font Squirrel, and he specifically notes:
If you downloaded the kit, you might try regenerating the font with
the generator. We make periodic adjustments to the generator that
might improve the hinting or rendering of the font.
But he also confirms,
Not to pass the buck, but the most common cause is a bad original
font.
Which goes with my point #2.
I had the same problem and the solution was to reconstruct the font with the properties of the original without changing anything in a new file with Hight logic font creator, the font is unchanged and equal to the original problem is corrected and aligned to the perfection in all browsers including ie6, was the work of a few hours but this is the result in case you need some user.
http://www.filefactory.com/file/1miw29cddg21/n/crossbrowser_gabriola_font.zip
This is the solution if anyone has the issue and do not want or cannot reconstruct the font:
https://developer.mozilla.org/en-US/docs/Web/CSS/#font-face/ascent-override
This prop will adjust the vertical ascend property when the font is imported.