I noticed that materialized CSS icons does not show up in Safari (v5.1.7 (7534.57.2). Well searched a lot on this topic but there haven't been any documentation on browser compatibility where safari has been listed. Could anyone let me know if this is a bug which needs to be fixed or are there any alternatives to get this work in Safari.
Other browsers
Safari Browser
PS:Other functionalities of materializecss works well except icons
I faced the exact same issue. The following approach helped me:
I was facing problems with the font-icons provided by materialize css. There seems to be some problem with the font-icons in case if you are self-hosting it. I will update my answer with the exact bug number. So to fix it I downloaded and used the font-icons provided by Google and followed the steps mentioned over here.
Be sure to append the following to your CSS:
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
Another thing to make sure is to see to it that you are using all the font formats provided by google: WOFF2, WOFF, Truetype, EOT and even SVGs if possible to ensure cross browser compatibility.
In case if you are not self hosting the font-icons, just try including the above mentioned CSS code. I haven't tried this with CDN but it did work for me for self-hosted font-icons. So let us all know how things work out, so that in case if it doesn't, we can try some alternate solution.
suddenly you have the Lockdown mode on. Go to safari menu > settings > websites > Lockdown Mode, and turn it off on the websites you have there.
Related
The text is correctly displayed in Chrome. I want it to display this way in all browsers. How can I do this?
I was able to fix this in Safari with -webkit-font-smoothing: antialiased;
Chrome:
Firefox:
h1 {
font-family: Georgia;
font-weight: normal;
font-size: 16pt;
color: #444444;
-webkit-font-smoothing: antialiased;
}
<h1>Hi, my name</h1>
And a JSFiddle: http://jsfiddle.net/jnxQ8/1/
Be sure the font is the same for all browsers. If it is the same font, then the problem has no solution using cross-browser CSS.
Because every browser has its own font rendering engine, they are all different. They can also differ in later versions, or across different OS's.
UPDATE: For those who do not understand the browser and OS font rendering differences, read this and this.
However, the difference is not even noticeable by most people, and users accept that. Forget pixel-perfect cross-browser design, unless you are:
Trying to turn-off the subpixel rendering by CSS (not all browsers allow that and the text may be ugly...)
Using images (resources are demanding and hard to maintain)
Replacing Flash (need some programming and doesn't work on iOS)
UPDATE: I checked the example page. Tuning the kerning by text-rendering should help:
text-rendering: optimizeLegibility;
More references here:
Part of the font-rendering is controlled by font-smoothing (as mentioned) and another part is text-rendering. Tuning these properties may help as their default values are not the same across browsers.
For Chrome, if this is still not displaying OK for you, try this text-shadow hack. It should improve your Chrome font rendering, especially in Windows. However, text-shadow will go mad under Windows XP. Be careful.
In order to best standardise your #font-face embedded fonts across browsers try including the below inside your #font-face declaration or on your body font styling:
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
At present there looks to be no universal fix across all platforms and browser builds. As stated frequently all browsers/OS have different text rendering engines.
There's some great information about this here:
https://bugzilla.mozilla.org/show_bug.cgi?id=857142
Still experimenting but so far a minimally invasive solution, aimed only at FF is:
body {
-moz-osx-font-smoothing: grayscale;
}
Try -webkit-font-smoothing: subpixel-antialiased;
I collected and tested discussed solutions:
Windows10 Prof x64:
* FireFox v.56.0 x32
* Opera v.49.0
* Google Chrome v.61.0.3163.100 x64-bit
macOs X Serra v.10.12.6 Mac mini (Mid 2010):
* Safari v.10.1.2(12603.3.8)
* FireFox v.57.0 Quantum
* Opera v49.0
Semi (still micro fat in Safari) solved fatty fonts:
text-transform: none; // mac ff fix
-webkit-font-smoothing: antialiased; // safari mac nicer
-moz-osx-font-smoothing: grayscale; // fix fatty ff on mac
Have no visual effect
line-height: 1;
text-rendering: optimizeLegibility;
speak: none;
font-style: normal;
font-variant: normal;
Wrong visual effect:
-webkit-font-smoothing: subpixel-antialiased !important; //more fatty in safari
text-rendering: geometricPrecision !important; //more fatty in safari
do not forget to set !important when testing or be sure that your style is not overridden
I have many sites with this issue & finally found a fix to firefox fonts being thicker than chrome.
You need this line next to your -webkit fix -moz-osx-font-smoothing: grayscale;
body{
text-rendering: optimizeLegibility;
-webkit-font-smoothing: subpixel-antialiased;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
I don't think using "points" for font-size on a screen is a good idea. Try using px or em on font-size.
From W3C:
Do not specify the font-size in pt,
or other absolute length units. They
render inconsistently across platforms
and can't be resized by the User Agent
(e.g browser).
Try text-rendering: geometricPrecision;.
Different from text-rendering: optimizeLegibility;, it takes care of kerning problems when scaling fonts, while the last enables kerning and ligatures.
I have a webapp that uses Dosis as its main font (http://www.google.com/fonts/specimen/Dosis), and it looks great every browser but Safari mobile, where my font is rendered like this:
http://imgur.com/a/w4XEu (The iPhone rendering is the one in the second image.)
The font is imported in this way:
<link href='http://fonts.googleapis.com/css?family=Dosis:200' rel='stylesheet' type='text/css'>
If I increase the font weight the rendering is slightly better, but still weird.
I've tried few workaround with CSS, like:
* {
font-weight: normal;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
font-smoothing: none;
}
but solved nothing.
Any idea on what is the reason of this strange behaviour?
edit, one maybe important detail:
that table is handled by owlcarousel2 (https://github.com/OwlFonk/OwlCarousel2)
Try one of these:
-webkit-text-size-adjust: 100%
-webkit-font-smoothing: antialiased;
I have no explanation for this, just Googled it..
The problem is that by default Proxima Nova numbers are not monospaced. Therefore a simple price list table does not line up. (see Figure 1)
Figure 1. Misaligned numbers
The question is:
is there some CSS rule to access monospaced numbers?
is there some HTML code trick so I can access monospaced numbers as characters? (sth like ∑)
or should I use <span class="figure">1</span><span class="figure">2</span>...?
Cheers!
CSS3 Fonts’ font-variant-numeric. This allows you to toggle Opentype features. In your case this would be:
.my-element { font-variant-numeric: tabular-nums; }
Proxima Nova lists support for tabular figures so that’s good, but I’m not sure about browser support for font-variant-numeric. If that doesn’t work then you could try font-feature-settings instead which should give you the same effect with (possibly) more support:
.my-element { font-feature-settings: "tnum" on; }
The specification does say though that:
Authors should generally use ‘font-variant’ and its related subproperties whenever possible.
I've found a solution. The CSS is
.tabular-numbers {
-moz-font-feature-settings:"tnum" 1; /* Firefox 31+ */
-moz-font-feature-settings:"tnum=1";
-webkit-font-feature-settings: 'tnum' 1; /* Chrome 31+, Android 4.4+, Opera 24+ */
font-feature-settings: 'tnum' 1; /* IE10+ */
}
References: http://clagnut.com/sandbox/css3/ and http://caniuse.com/#feat=font-feature
Contrary to answers to: No support for font-feature-settings in Safari? , I have seen no support on Mac Safari 7.1.
So the only universally working solution is currently:
.tabular-figure {
display: inline-block;
width: 7px;
text-align: center;
}
and <span class="tabular-figure">5</span><span class="tabular-figure">6</span><span class="tabular-figure">7</span><span class="tabular-figure">1</span>
which is a crap, so more like
.number{
font-family: "Helvetica Neue";
}
<span class="number">5671</span>
Looks like Apple Safari is becoming the new Internet Explorer... :###
Since I have used Icon fonts, Its been a huge issue to have two colors with one class instead of a bunch of positioning or clipping.. since it is rather a common thing to have multicolored icons in a site, I came Across the solution today I thought I may just post this for people like me who looked for answers but only found complications...
Okay i am going to do this in a step-by-step manner:
ILLUSTRATOR PART
in illustrator copy the icon into a new document.
then cut the one color.
press save as and save as SVG
then paste the one you cut and delete the other one.
save as another SVG.
ICOMOON
Really is a great site.
start the app.
import the svg and download an save.
and then this is the CSS I used for a one class solution to multicolored font icons:
CSS
.icon-earth{
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.icon-earth:after {
content: "\e006";
color:#F33;
font-size:6em;
}
.icon-earth:before {
content: "\e007";
color:#0C0;
font-size:6em;
letter-spacing:-1em;
}
HTML
<div class="icon-earth"></div>
its quiet easy to interpret the CSS for you own needs, if help is need please shout and I will go through this step by step aswell...
And Finally Here is the JSFIDDLE, although i cant get custom Icon Fonts happening in JsFiddle...
Browser support is IE8 and up and then everything else i have checked..
I'm aware that different browsers render text in different ways – and to a point, I'm cool with that. However upon experimenting with using icon fonts for one project, Firefox, in particular is irritating me.
Essentially I have a row of social media icons, which are displayed via #font-face and some pseudo classes. Except Firefox has a little issue with rendering them nicely...
Here's what they look like Chrome vs Firefox.
Chrome 23.0.1271.101 (Mac)
http://cl.ly/image/0M3t2S3N2A38/
(Perfect)
Firefox 17.0.1 (Mac)
http://cl.ly/image/053d2J0J312K
(Not-so-perfect)
You can probably see the issue I have...
I've also checked several other browsers to see if it's not just firefox. It is just firefox. Even IE does a nicer job.
The code:
CSS
#font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.svg#icomoon') format('svg'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
[class^="icon-"]:before,
[class*=" icon-"]:before {
font-family: 'icomoon';
font-style: normal;
speak: none;
font-weight: normal;
line-height: 1;
text-align: center;
}
.icon-flkr:before {
content: "\2b";
}
.icon-fbk:before {
content: "\2c";
}
.icon-twitter:before {
content: "\3e";
}
.icon-lfm:before {
content: "\24";
}
.icon-lkdin:before {
content: "\25";
}
.icon-inst:before {
content: "\26";
}
HTML
<ul id="footer_social_list" class="group">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
I've tried a lot of things to try and fix this. From changing the opacity with CSS; to trying text shadow; changing the weights of both the #font-face, classes and inherited styles; using "data-icon"; even making sure each icon is aligned to the pixel grid.
Nothing has yet yielded any improvement in Firefox, and I'd say with the slight exception of the Instagram icon in IE9, everything looks good in every browser.
So why does Firefox do this? And is there anything I can do to make it behave?
PS: I haven't added -webkit-font-smoothing: antialiased; not that it affects Firefox anyway.
-moz-osx-font-smoothing: grayscale;
See the discussion leading to this new vendor prefixed solution for Firefox.
font-weight:normal !important;
This may seem like the obvious answer but no one mentioned it. Very possible you have a !important on your anchor tags somewhere along the line, keeping them from being normally weighted again.
This is another obvious answer that no one mentioned:
What you're talking about happens in all browsers: when you use light text on a dark background, the text seems more "weighty". The same is true for icon fonts... the small details will bloat out. (There are CSS font-smoothing and text-rendering properties that help correct this, but they don't necessarily work the same in all browsers. See here.)
One way you can get around it, if you want a dark-coloured icon on a lighter circle shape (without using SVG), is to use an icon without the circle, then create your own circle background with CSS.
You won't get a true knockout (the icons won't actually be negative space in the circle, so any background patterns behind your buttons won't show through the icons), but you will avoid the light-text-on-dark-background bleedout.
Of course, you will also lose your border-radius in older versions IE... so weigh (ahem) what matters more.