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... :###
Related
I have a text element with the follow CSS rules:
box-sizing:border-box;
color:rgb(38, 38, 38);
display:block;
float:left;
font-family:Brandon, sans-serif;
font-size:14px;
font-weight:700;
height:20px;
line-height:16.8px;
list-style-image:none;
list-style-position:outside;
list-style-type:none;
position:relative;
text-align:left;
text-size-adjust:100%;
visibility:visible;
-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
My question/problem is that while the rendered element width is pretty constant across browsers (between 146.50px and 150px) on Safari it's up to 165px almost 10% extra compared to all other browsers. Since I have a few elements in a row this difference makes the whole design not fit on Safari...
I have tried all kind of tricks like:
- letter-spacing, word-spacing
Everything suggested here: Safari font rendering issues
But I cannot find any solution. I have tested the design in:
- Firefox (Windows and Mac), Internet Explorer, Edge, Chrome (Both windows and mac) and the result is more or less constant. Chrome Mac vs Windows have a difference of about 1 pixel.
What is the reason that Safari makes the item so much wider and better yet is there a way to normalize this across browsers (without setting a fixed width of course)
Edit
#font-face {
font-family: "Brandon";
font-style: normal;
font-weight: normal;
src: url("../fonts/Brandon_reg.otf") format("opentype");
}
Two possibilities at first glance:
The otf format is not supported by Safari
There's no bold or 700 version of font Brandon provided, browsers try to mimic the bold version, which may vary in the rendering result. You may try to disable it by adding font-synthesis: none to text or providing the bold version of your font.
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.
I have the following css:
h1{
font-family: "tablet-gothic-n9", "tablet-gothic", sans-serif;
font-style: normal;
font-weight: 900;
text-rendering: geometricPrecision;
letter-spacing: 0.05em;
}
This lays out the text beautifully in Chrome, Safari and Firefox.
IE doesn't support text-rendering and as such won't display proper letter pairs and ligatures. This results in letters having wider spacing. As such, I want to set letter-spacing: 0 for all versions of IE.
I did the following in the header of my page, below the stylesheet link:
<!--[if IE]>
<style>
h1{
letter-spacing: 0;
}
</style>
<![endif]-->
This works fine in IE8 and 9, but fails in IE10 and 11 as these latter browsers don't read conditional comments.
I've tried adding the following to the head of the page:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9">
as suggested here http://msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx
But this doesn't seem to work.
Any solutions to get IE10 and 11 to set letter-spacing: 0?
for IE9 and earlier, you can the following for 6,7,8 and 9 in most cases (I have tested your one):
letter-spacing:.05em;
letter-spacing:0px\9;
For IE 10 please check this IE 10 Hack article and StackOverFlow [question]: How do I target only Internet Explorer 10 for certain situations like Internet Explorer-specific CSS or Internet Explorer-specific JavaScript code?
For kerning (which is probably what “proper letter pairs” means in the question) and ligatures, you can use the font-feature-settings property. It is supported by IE 10 and newer, so you avoid the need for “conditional comments” (which don’t work on IE 10 and newer).
h1 { font-feature-settings: "kern", "liga" }
(possibly adding "clig" etc., but I doubt whether Tablet Gothic has ligatures beyond “standard ligatures”).
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.
As I mentioned in the title, when using css font-family, custom font (font-face), it messes up (black background, black text (I guess)) auto complete drop down list in Opera.
input[type='text'], input[type='password'], input[type='email'], input[placeholder] {
font-size: 1.2em;
font-family: sans-serif;
color: #2A873A;
padding-left: 25px;
}
Code above works fine, but if I replace "font-family: sans-serif;" with some font-face font (google web fonts too), then problem starts.
Here is the screenshot of "bug" in action.
P.S. I should mention that that is Opera's native autocomplete, not custom js, dropdown list.
EDIT:
http://jsfiddle.net/burCR/
Have you tried specifying the font directly in your css? for example:
div.magicsomething {font-family:CustomFont,Customfont2,sans-serif;}
Keep in mind nested elements get stuck with custom fonts, so if you don't do the above, you may also very well need font-family:inherit in your 'nested elements'.
For extra help, please mention the name of the custom font, your full css and a live link to your site
Although this may be something obvious, check to make sure that your font is compatible with Opera. Here is a list of some web safe fonts.
http://www.w3schools.com/cssref/css_websafe_fonts.asp
And if that doesn't work try taking the font you want from microsoft word and use #fontface to insert you custom font instead of using a websafe one.
And finally try using your font-family on the form and have the input inherit the font.
Hopefully this helped.
Ditto to specifying the font directly. You may also want to try using base64 encoding, which in my experience works beautifully and with great cross-browser compatibility.
You can specify colors for both the background and the text individually.
input {
background-color: white;
color: black;
font-family: "My Fontface Font", Verdana, ms serif;
}