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/
Related
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
I'd like to use Sigil to change font family to embedded ones. I believe I've made everything right in CSS. I imported the "1984" font in Sigil.
I have read this tutorial: http://www.pigsgourdsandwikis.com/2011/04/embedding-fonts-in-epub-ipad-iphone-and.html and the sample works fine with ADE 3.0 but if I open it, don't edit the file and save, it wouldn't show the embedded files.
#font-face {
font-family: 1984, serif;
font-style: normal;
font-weight: normal;
src:url("../Fonts/1984.ttf");
}
.s8{
color: #000000;
font-family: "1984.ttf";
font-size: 125.5000%;
font-style: normal;
font-variant: normal;
font-weight: bold;
letter-spacing: 0.0000em;
margin-bottom: 0.0000%;
margin-top: 0.0000%;
padding-left: 0.0000%;
padding-right: 0.0000%;
text-align: left;
text-decoration: none;
text-indent: 0.0000%;
text-transform: none;
}
What could I do?
Thanks!
font-family: "1984.ttf"; looks like it should just be font-family: 1984;
Also note that zero values in CSS (i.e. 0.0000%;) can simply be replaced with 0
I have a problem with my icomoon font in Chrome with that icons are sometimes not shown. I don't get the font-missing empty rectangle "fallback".
When I select the element with an icon it will appear, so a repaint will fix it. But forcing a repaint is a terrible solution...
The only solution I find regarding buggy iconfonts in Chrome is to use PUA codes, but I already do that.
My CSS for icons:
.icon-back-in-time-mirror:before {
content: "\e613";
}
.icon {
position: relative;
}
.icon:before {
position: absolute;
height: 22px;
margin: -11px 0 0;
top: 50%;
left: 0;
font-family: 'icomoon';
font-weight: 400;
line-height: 22px;
display: block;
speak: none;
}
The #font-face rules
#font-face {
font-family: 'icomoon';
src:url('/gui/css/fonts/icomoon.eot?-cpkbjx');
src:url('/gui/css/fonts/icomoon.eot?#iefix-cpkbjx') format('embedded-opentype'),
url('/gui/css/fonts/icomoon.woff?-cpkbjx') format('woff'),
url('/gui/css/fonts/icomoon.ttf?-cpkbjx') format('truetype'),
url('/gui/css/fonts/icomoon.svg?-cpkbjx#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
I use a template for my web project and in asp.net. In localhost my icons seen clearly like top of picture but when i upload it to host it seen like below the correct one. When i look css codes of template i saw like this:
#font-face {
font-family: 'FontAwesome';
src: url('../font/fontawesome-webfont.eot?v=3.1.0');
src: url('../font/fontawesome-webfont.eot?#iefix&v=3.1.0') format('embedded-opentype'),url('../font/fontawesome-webfont.woff?v=3.1.0') format('woff'),url('../font/fontawesome-webfont.ttf?v=3.1.0') format('truetype'),url('../font/fontawesome-webfont.svg#fontawesomeregular?v=3.1.0') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration: inherit;
-webkit-font-smoothing: antialiased;
*margin-right: .3em;
}
[class^="icon-"]:before, [class*=" icon-"]:before {
text-decoration: inherit;
display: inline-block;
speak: none;
}
.icon-large:before {
vertical-align: -10%;
font-size: 1.3333333333333333em;
}
a [class^="icon-"], a [class*=" icon-"], a [class^="icon-"]:before, a [class*=" icon-"]:before {
display: inline;
}
[class^="icon-"].icon-fixed-width, [class*=" icon-"].icon-fixed-width {
display: inline-block;
width: 1.2857142857142858em;
text-align: center;
}
[class^="icon-"].icon-fixed-width.icon-large, [class*=" icon-"].icon-fixed-width.icon-large {
width: 1.5714285714285714em;
}
ul.icons-ul {
list-style-type: none;
text-indent: -0.7142857142857143em;
margin-left: 2.142857142857143em;
}
ul.icons-ul > li .icon-li {
width: .7142857142857143em;
display: inline-block;
text-align: center;
}
[class^="icon-"].hide, [class*=" icon-"].hide {
display: none;
}
.icon-muted {
color: #eee;
}
.icon-glass:before {
content: "\f000";
}
I am not good at css. What is that and how can i solve this?
Make sure you also upload the font to the webhost, and link it correctly according to this line: ../font/fontawesome-webfont.eot?v=3.1.0
I am trying to make the font in h1 less bold. It seems like the letters are just to fat.
CSS:
h1 {color: #FFFFFF; font-family: ballparkweiner; font-size: 110px;
text-align: center; margin: 0px; }
#font-face {
font-family: 'ballparkweiner';
src: url('ballw___.eot');
src: url('ballw___.eot?#iefix') format('embedded-opentype'),
url('ballw___.woff') format('woff'),
url('ballw___.ttf') format('truetype'),
url('ballw___.svg#ballparkweiner') format('svg');
font-weight: normal;
font-style: normal;
}
h2 { margin: 0px; text-align: center; font-size: 40px; color: #FFFFFF; font-family: Cambria;}
body {background-color: #000000;}
h3 {text-align: center; color: #FFFFFF; }
#footer { font-weight: bold; text-align: center; font-family: Audimat;
clear: both; width:48%;
border-radius: 8px;
background-color:black;
text-align:center; margin-right:auto;
margin-left:auto; color: #FFFFFF; }
From the information I gathered on-line, most said to use font-weight: lighter;
but that doesn't validate when I use the css validator. Any ideas?
Add this:
h1 { font-weight: normal; }
By default, browsers use bold weight for h1. Since your #font-face declares only normal weight typeface, (some) browsers will algorithmically bold the glyphs (i.e., make the strokes wider using some simple method).
I checked your css validate, where did you checked? Probably you checked for css2 validation. Check here this one is original/best http://jigsaw.w3.org/css-validator/validator
I actually just added the font weight line (I had it under the #font face instead )
h1 {color: #FFFFFF; font-family: ballparkweiner; font-size: 110px;
text-align: center; margin: 0px; font-weight: lighter; }