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;
}
Related
Why do web fonts render differently between browsers, and what steps can be taken to fix the issue?
I'm having some issues with cross browser web font issues. I am absolutely positioning spans with single characters within them. Between browsers, the characters seem to be positioned the same relative to each other (within a few pixels).
However in IE, the grouping of characters is way off in relation to the rest of the flow of the document. The behavior when the characters are highlighted seems dramatically different in IE as well.
Does this have to do with font metrics? All 3 browsers are being rendered with a WOFF font.
Rendered in Chrome:
Rendered in Firefox:
Rendered in Internet Explorer:
Here is a snippet of the code:
<div style="border: 3px #000 solid; padding: 0px; line-height: 1; position: relative; width: 85.75px; height: 80px; font-size: 80px;">
<span class="MathJax_Main" style="position: absolute; left: 0; top: 0;">3</span>
<span class="MathJax_MathItalic" style="position: absolute; left: 40px; top: 0;">x</span>
</div>
Here is the CSS used to load the web font:
#font-face {
font-family: 'MathJax_Math';
src: url('woff/MathJax_Math-Italic.woff') format('woff'),
url('svg/MathJax_Math-Italic.svg#MathJax_Math') format('svg');
font-style: italic;
font-weight: normal;
}
#font-face {
font-family: 'MathJax_Main';
src: url('woff/MathJax_Main-Regular.woff') format('woff'),
url('svg/MathJax_Main-Regular.svg#MathJax_Main') format('svg');
font-weight: normal;
}
.MathJax_MathItalic {
font-family: 'MathJax_Math';
font-style: italic;
}
.MathJax_Main {
font-family: 'MathJax_Main';
}
I've been struggling with an issue for days now. I have a webfont kit from fontsquirrel. IE9 won't load the fonts when I load the containing webpage in an iframe. Weirdly enough, when I load the page in the browser itself, it does work. No errors in F12 developer tools.
The code:
<style type="text/css">
html, body {
margin: 0;
padding: 0 0 1em 0;
width: 100%;
height: 100%;
/*overflow-x: hidden;
overflow-y: auto;*/
overflow: hidden;
position: relative;
}
#font-face {
font-family: 'bebas_neueregular';
src: url('build/img/BebasNeue-webfont.eot?');
src: url('build/img/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
url('build/img/BebasNeue-webfont.woff') format('woff'),
url('build/img/BebasNeue-webfont.ttf') format('truetype'),
url('build/img/BebasNeue-webfont.svg#bebas_neueregular') format('svg');
font-weight: normal;
font-style: normal;
}
</style>
I have downloaded some icons from icomoom but the icon background colours are black and white.I want to give my own colour.Can any body please tell me how to do?
When I downloaded the icon ,I got the following style.css
#font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?-haa506');
src:url('fonts/icomoon.eot?#iefix-haa506') format('embedded-opentype'),
url('fonts/icomoon.woff?-haa506') format('woff'),
url('fonts/icomoon.ttf?-haa506') format('truetype'),
url('fonts/icomoon.svg?-haa506#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-home:before {
content: "\e600";
}
.icon-images:before {
content: "\e601";
}
.icon-pawn:before {
content: "\e602";
}
The icons should be treated as text.
If you apply a color to them. they will change their color.
Example:
.icon-pawn { color: red; }
I had to use the ::after pseudo element.
.icon-pawn::after { color: red; }
I'm not sure if this is peculiar to my project though, as I'm working on small changes to someone else's code.
This works for me:
.icon-color-success:before {
color: #28a745 !important;
}
and then:
<i class="icon-python icon-color-success"></i>
Edit:
Chrome is somehow rendering the fonts i use via #font-face incorrectly. Which i found as i changed the font family of the inspected element to arial. The reason this might be, is because as i was searching for a fix on how chrome renders fonts so they appear more smooth instead of pixelated, i found that you could swap the order of the font formats and put the svg on top which would cause chrome to render it perfectly. As seen here.
So either the order is messing them up, or simply the font is broken in some way.
Now the question is, how do i use this font without breaking the site and keeping the fonts smooth?
Here is the #font-face code i use:
#font-face {
font-family: 'alegreya_scregular';
src: url('../includes/fonts/alegreyasc-regular-webfont.eot');
src: url('../includes/fonts/alegreyasc-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../includes/fonts/alegreyasc-regular-webfont.svg#alegreya_scregular') format('svg'),
url('../includes/fonts/alegreyasc-regular-webfont.woff') format('woff'),
url('../includes/fonts/alegreyasc-regular-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'droid_sansregular';
src: url('../includes/fonts/droidsans-webfont.eot');
src: url('../includes/fonts/droidsans-webfont.eot?#iefix') format('embedded-opentype'),
url('../includes/fonts/droidsans-webfont.svg#droid_sansregular') format('svg'),
url('../includes/fonts/droidsans-webfont.woff') format('woff'),
url('../includes/fonts/droidsans-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'droid_sansbold';
src: url('../includes/fonts/droidsans-bold-webfont.eot');
src: url('../includes/fonts/droidsans-bold-webfont.eot?#iefix') format('embedded-opentype'),
url('../includes/fonts/droidsans-bold-webfont.svg#droid_sansbold') format('svg'),
url('../includes/fonts/droidsans-bold-webfont.woff') format('woff'),
url('../includes/fonts/droidsans-bold-webfont.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
I have some rendering issues on chrome. For some reason, the links right side gets cut off so the underlines will only fill half the of text, and the divs on the right side will not break off the words to a new line. It only happens some of the time and if i refresh the page a couple of times (differs how many times) it will fix itself eventually. Images are below.
Note: The site is in danish.
Images, underlined the issues in red:
http://i.stack.imgur.com/zJHXD.jpg
What causes this, and how do i fix it?
Note: This is for the navigation links
HTML:
<ul class="nav">
<li class="first"></li>
<li>Forside</li>
<li>Booking</li>
<li>Galleri</li>
<li>Begivenheder</li>
<li>Events</li>
<li>Politik</li>
<li>Kontakt</li>
</ul>
CSS:
.header .nav {
position: absolute;
overflow: hidden;
font-size: .70em;
bottom: -8px;
right: 16px;
}
.header .nav li {
float: left;
background: #171717 url(../images/site/nav_divider.png) repeat-y right;
text-transform: uppercase;
} .header .nav li:hover {
background: #1a1a1a url(../images/site/nav_divider.png) repeat-y right;
}
.header .nav .first {
width:2px;
height:31px;
margin-bottom:-0.95em;
}
.header .nav li a {
display: block;
padding: .75em .85em .75em .75em;
color: #e0e0e0;
text-decoration: none;
}
After a bit of searching on #font-face and chrome behaviour, i found a solution to the problem. Apparently moving the svg to the top will make the rendered font break the layout, so instead you should keep the original formatting and add a special media query, which will render the font smoothly in chrome while not breaking the layout.
Example:
#font-face {
font-family: 'droid_sansregular';
src: url('../includes/fonts/droidsans-webfont.eot');
src: url('../includes/fonts/droidsans-webfont.eot?#iefix') format('embedded-opentype'),
url('../includes/fonts/droidsans-webfont.woff') format('woff'),
url('../includes/fonts/droidsans-webfont.ttf') format('truetype'),
url('../includes/fonts/droidsans-webfont.svg#droid_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
#media screen and (-webkit-min-device-pixel-ratio:0) {
#font-face {
font-family: 'droid_sansregular';
src: url('../includes/fonts/droidsans-webfont.svg#droid_sansregular') format('svg');
font-weight: normal;
font-style: normal;
}
}
I'm coding my first site, and didn't realize how frustrating cross-browser compatibility would be. Here's my site: http://www.tommaxwell.me. It looks the way I want it to in Safari and Chrome (maybe because they're Webkit?), but in Opera and Firefox, the spacing between the first header and the tagline is way too much. I can't figure out how to fix this. I read something about CSS Reset's, but I'm not sure how to use it or exactly what it is.
CSS:
body {
background-image:url(209241_2453996366505_1946848896_o.gif);
background-position:center center;
background-attachment:fixed;
-o-background-size: 100% 100%, auto;
-moz-background-size: 100% 100%, auto;
-webkit-background-size: 100% 100%, auto;
background-size: 100% 100%, auto;
padding:0;
margin:0;
}
#font-face {
font-family: 'klavika_rgregular';
src: url('klavika-regular-webfont.eot');
src: url('klavika-regular-webfont.eot?#iefix') format('embedded-opentype'),
url('klavika-regular-webfont.woff') format('woff'),
url('klavika-regular-webfont.ttf') format('truetype'),
url('klavika-regular-webfont.svg#klavika_rgregular') format('svg');
font-weight: normal;
font-style: normal;
}
#font-face {
font-family: 'klavika_mediummedium';
src: url('klavikamedium-osf-webfont.eot');
src: url('klavikamedium-osf-webfont.eot?#iefix') format('embedded-opentype'),
url('klavikamedium-osf-webfont.woff') format('woff'),
url('klavikamedium-osf-webfont.ttf') format('truetype'),
url('klavikamedium-osf-webfont.svg#klavika_mediummedium') format('svg');
font-weight: normal;
font-style: normal;
}
h1 {
text-align: center;
margin-top: 10%;
font-family: klavika_mediummedium;
color:#FFFFFF;
font-size: 6.250em;
font-weight: 400;
}
p {
position: relative;
top:-8%;
text-align: center;
font-family: klavika_rgregular;
color:#FFFFFF;
font-size: 1.875em;
font-weight: 400;
}
ul {
position: relative;
list-style-type: none;
margin-top: 5%;
margin-left: 37%;
font-family: klavika_mediummedium;
}
ul li {
font-size: 2.500em;
font-weight: 400;
float: left;
padding-right: 3%;
}
You should use doctype(first line in html file).
For better CSS and cross-browser compatibility use reset:
http://meyerweb.com/eric/tools/css/reset/
Choose HTML5 Boilerplate as your default template, it comes with Normalize CSS which resets the default settings of all browsers.
HTML5 Boilerplate has comments on almost each line of CSS and HTML, these comments makes it more easy to use.
Your solution is in setting line-height: 30px; to h1 element because h1 has too large font-size so you have to adjust line-height
Just replace my p tag class into your css :-
CSS
p {
color: #FFFFFF;
font-family: klavika_rgregular;
font-size: 1.875em;
font-weight: 400;
margin: 0;
padding: 0;
text-align: center;
}