There's a slight difference between the way Chrome for Windows and Chrome for Mac handle content added in CSS to :before.
Here's the CSS for the following:
.s-smiley:before {
content: "\EA20";
}
.s-smiley {
color: white;
background: #D8D8D8;
margin-top: 46px;
margin-right: 16px;
padding: 9px;
font-size: 37px;
line-height: 29px;
}
.s-smiley {
background: #50E3C2;
}
.s:before {
display: inline-block;
font-family: symbols;
font-style: normal;
font-weight: 400;
line-height: 37px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
The issue is that in Windows - the content seems to be pushed down and also takes up room. Anyone else know this issue? Is there a fix for it?
Chrome for Windows:
Chrome for Mac:
hard to say without complete code but try this:
.s:before {
display: block;
float:left;
font-family: symbols;
font-style: normal;
font-weight: 400;
height: 37px;
line-height:37px;
overflow:hidden;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
http://jsfiddle.net/kmrjy11d/
also make sure your font files are correct
Related
When building forms,I need to indicate which are required. I follow this recipe:
<span class='glyphicon glyphicon-asterisk' style'color:red;font-size:9px;'></span>Label
My goal is to create 1 CSS class that uses the Bootstrap glyphicon class as well as bootstrap's glyphicon-asterisk But also allowing me to combine my own style rules.I have read that people use LESS mixins to do this. However I am asking if it is possible to go another route
The code looking something like this:
.req{
position:relative;
top:1px;
display:inline-block;
font-family: 'Glyphicons Halflings';
font-style:normal;
font-weight:normal;
font-size: 9px;
font-color:red;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
content:"\2a";
}
However for some reason this does not work.
This is the two bootstrap classes I wish to combine.
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon-asterisk:before {
content: "\2a";
}
How can I achieve this without using LESS or SASS or any preprocessor So that when using the code:
<span class='req'></span>Label
I will receive the same output as the original one.
Note I do not want to overwrite the existing bootstrap classes. I want to create a new class in my own style.css that makes use of the two bootstrap classes.
There is no font-color CSS property, you have to use color. And if you want to use just one class you can use this code.
.req {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
font-size:9px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.req:before {
content: "\2a";
color: red;
}
The problem is that you use the 'content: "\2a"' inside the .req however you can assign content only to :before or :after.
I have very simple element on page - it's a quantity balloon for basket, which I'm unable to set properly. Not only the font is dramatically different, but its vertical position differs significantly for a small element like this:
I've tried some solutions from stackoverflow (e.g. to set line-height -1 from font size), but no luck. Here is the code:
HTML:
<span class="basket-qty">6</span>
CSS:
.basket-qty {
display: block;
text-align: center;
background-color: #C1637D;
color: #fff;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 13px;
font-weight: 500;
border-radius: 15px;
width:15px;
height:15px;
}
JSFiddle: https://jsfiddle.net/e563tgdn/
Could it "just" be Font Rendering? Do css-setting like this help to normalize?
-webkit-text-size-adjust: none;
text-size-adjust: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-ms-text-size-adjust: 100%;
I have two style sheets, a ltr and an rtl version. Take the following snippet
#if $text-direction == 'ltr' {
.arrow-link:before {
content: "\e021";
font-family: 'iconfont';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
display: inline;
padding-right: 5px;
vertical-align: middle;
}
}#else {
.arrow-link:after {
content: "\e023";
font-family: 'iconfont';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
-webkit-font-smoothing: antialiased;
display: inline;
padding-left: 5px;
vertical-align: middle;
}
}
This works as expected using english. But If i swap for hebrew text the icon is palced ont he wrong side and Im not sure why. This fiddle explains better, the last span with hebrew text places the after element before.
https://jsfiddle.net/2zze9q8z/
Result sample:
font rendering issue sample
As you can see two letters "f" and "l" are bold in every browsers and my styles.css doesn't have any rules for it. I'm not sure, but think that is due a problem with font's rendering ("HelveticaNeueW01-45Ligh, Helvetica Neue,Helvetica,sans-serif").
I tried to use "text-rendering: optimizeLegibility" property, but it doesn't seem to help.
<p style="text-rendering: optimizelegibility;">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows. Separated they live in Bookmarksgrove right at the coast of the Semantics.</p>
and Styles:
element {
text-rendering: optimizelegibility;
}
body.home .entry-content p {
margin: 20px 0px;
font-family: "HelveticaNeueW01-45Ligh",Helvetica Neue,Helvetica,sans-serif;
font-weight: normal;
font-style: normal;
font-size: 1.9em;
}
body.home .entry-content p {
margin: 20px 0px;
font-family: "HelveticaNeueW01-45Ligh",Helvetica Neue,Helvetica,sans-serif;
font-weight: normal;
font-style: normal;
font-size: 1.9em;
}
body.page-template-default .entry-content p {
font-size: 1.6em;
line-height: 1.5;
margin-bottom: 15px;
}
.entry-content p {
font-size: 1.6em;
line-height: 1.7;
}
.entry-content p {
margin: 0px 0px 15px;
font-size: 1.6em;
line-height: 1.7;
}
p {
margin-bottom: 1.5em;
}
body, button, input, select, textarea {
color: #404040;
font-family: "HelveticaNeueW01-55Roma",Helvetica Neue,Helvetica,sans-serif;
font-weight: normal;
font-style: normal;
line-height: 1.5;
}
What can I do to improve how this font is being rendered?
text-redering / ligatures
You've mentioned already that you've tried the following css attribute.
text-rendering: optimizeLegibility;
There may be a few more things for you to consider, from Article "Make Your Web Pages More Legible With Ligatures":
"To turn on standard ligatures, use:"
p { font-variant-ligatures: common-ligatures; }
"To gain support in all browsers, while using text-rendering: optimizeLegibility as a fallback":
p {
/* optional: for older browsers */
text-rendering: optimizeLegibility;
/* for iOS and Safari 6 */
-webkit-font-variant-ligatures: common-ligatures;
/* for up-to-date browsers, including IE10 and Opera 21 */
font-variant-ligatures: common-ligatures;
}
Recommended article:
Css-Tricks: text-rendering
font-smoothing
Another way to improve font appearance:
-webkit-font-smoothing: antialiased; // chrome - safari
-moz-osx-font-smoothing: grayscale; // mozilla
Two recommended articles:
Font smoothing explained
Font Smoothing in Webkit and Firefox
I have defined my Font-size as 98% in the body, just as follows:
body {
color: #6B6B6B;
background-color: #262626;
font-family: arial, sans-serif;
font-size: 98%;
line-height: 1.32;
text-align: center;
-webkit-text-size-adjust: none;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
}
The problem now, how can I make my h1 a bit bigger? and h2 big as well?
I tried:
h1 {
font-size: 120%;
line-height: 1;
}
But I don't think this is right, do I need to use px or em for my headers?
Using % is valid CSS.
You can have
h1{
font-size:150%;
}
You can use em what is able to scale your font. For example:
h1 {
font-size: 1.2em;
line-height: 1;
}
is equal to 120% of current font size.
Here you have useful article about font sizing.
Base on #verbose-mode comment, you can avoid the h1 and h2 elements to be selected by using the :not selector:
body {
color: #6B6B6B;
background-color: #262626;
font-family: arial, sans-serif;
line-height: 1.32;
text-align: center;
-webkit-text-size-adjust: none;
-webkit-font-smoothing: antialiased;
-webkit-overflow-scrolling: touch;
}
body *:not(h1):not(h2){
font-size: 30%;
}
You can see this fiddle.