The current behavior in Chrome, Firefox and Safari when it comes to media queries and resources is to not load the resource until you need it; e.g. a mobile device with a 480px resolution will not load images inside of max-device-width: 1000px rule. Naturally this is great for keeping weighty desktop resources away from mobile devices.
I am running into inconsistencies with this approach when it comes to loading font resources. The following will load the web font for all browsers listed above EXCEPT IE9
#media screen and (max-device-width: 1000px) {
#font-face{
font-family: 'SomeFont';
src: url('../Fonts/somefont.eot');
/* full stack here etc. */
}
}
This is annoying because I want to keep a large typeface away from mobile, but IE9 will not load the font unless it is outside a media query.
Is this the correct behavior? I can't find anything about font resources specifically in the spec, so it could be that IE9 is doing it correctly (even though this is not my desired behavior). Can anyone shed any light on this?
Here's why: "At-rules inside #media are invalid in CSS2.1".
Firefox seems to respect the specification as well.
so why don't you just wrap the ie9 specific #font-face declaration in conditional comments? either that or re-declare #font-face for mobile. i'm assuming that by "mobile" you mean IEMobile? you can target IEMobile via condtional comments as well, so you could do it either way.
<!--[if IE 9]><style>
#font-face{ font-family: 'SomeFont'; src: url('../Fonts/somefont.eot'); }
;</style><![endif]-->
#media screen and (max-device-width: 1000px) {
#font-face{ font-family: 'SomeFont'; src: url('../Fonts/somefont.eot'); }
}
Although old, my answer can help other users with the same problem. I wrote an article on how to solve this issue that can be read here.
Basically, you can use a conditional comment plus a JavaScript based solution because IE10 ignore conditional comments.
Related
I use a font called "Basic" and it looks like it's supposed to look like on chrome, but then when I view it on other browsers, although they load the font, it looks different, like bulkier and less rounded.
This font only has one weight and I just can't seem to figure out what causes this issue and how to fix it... Would appreciate any help
#font-face {
font-family: "Basic";
src: url('fonts/basic-regular-webfont.woff2') format('woff2'),
url('fonts/basic-regular-webfont.woff') format('woff'),
url('fonts/Basic-Regular.ttf') format('truetype');
}
That's ordinary, there are drastic differences from browser to browser on how the actual rendered text looks. The important thing here is that no matter how much control you try to exert over text, in the end, you don’t get much. Not to mention most browsers are able to let users re-size and override font settings on the fly.
Check this article:
Font Rendering Differences: Firefox vs. IE vs. Safari
I am building out an email, and I wanted to use position:relative to position the links where I need them to be. The only issue is iphones are affected by this change. I would like to be able to exclude IOS from seeing this change and for them to see my code without the position tag. Is there any way to exclude iphones from a CSS property?
I've tested my code on litmus and every email client works except for all of the iphones. The ipads work and all of the major email clients work as well.
Yes, it's possible if you use a CSS media query. To use CSS for non IOS devices, use the following media query:
#supports not (-webkit-overflow-scrolling: touch) {
/* CSS for other than iOS devices */
}
also, to do CSS for IOS devices only, you can use:
#supports (-webkit-overflow-scrolling: touch) {
/* CSS specific to iOS devices */
}
I hope this answers your question :)
I am using the following font-face rule:
#font-face {
font-family: aiCustomFont;
src: url('../fonts/myriadpro-regular.otf') format('opentype'),
url('../fonts/myriad pro regular.ttf') format('truetype');
}
This works exactly as expected for Safari, Chrome, and Firefox. It does not work at all for IE11 and Edge. I am not seeing any errors logging to the console or anywhere else. I have found many articles on font issues in IE but most of them are several years old.
Do I still need different font formats outside of TTF/OTF for the font to display in IE11/Edge?
If anyone stumbles across this post, I ended up just using a more web-friendly font.
Make sure your #font-face rules are NOT contained in media queries. #font-face rules contained in media queries do not work in IE, Edge, but work in every other modern browser I tested on.
I have a responsive site located here: http://wnmu.edu
Everything seems to be working just fine in all other modern browsers except IE9.
It seems like only certain #media queries are being recognize, even though they are in the same stylesheet. Take a look at this screenshot:
The menu "About WNMU, Current Students..." is visible, which is originally hidden in less than 480px screens. However, the hamburger menu is still visible. My css code seems pretty simple:
#media only screen and (min-width: 784px){
.banner #responsive_menu_toggles {
display: none;
}
}
I have capability mode off.
Thank you.
It looks like this question was asked once before, here.
Media query not working in IE9
Just in case anyone is crawling SO for an answer to this, the above
two answers aren't solving the core problem which is answered here -
CSS media query not working in IE 9
Basically inline CSS3 media queries DO work in IE9 but you have to
disable Compatibilty mode -
<meta http-equiv="X-UA-Compatible" content="IE=9">
The above meta tag needs to be placed before any other meta tags otherwise IE9 will default to compatibility mode on and will subsequently not work.
If you are curious I found this by searching google for ie9 #media css issues
Wow. Just figured it out. I guess IE9 has a "4094 rule" limit. So I broke apart the css file, and everything is good! I'll definitely see why I have so many rules.
Sigh of relief.
I am working on an a project for my online radio station, and that is the station's website. I worked really hard on it, made it look beautiful, and was really proud. For now, I'm hosting it at a free hosting/subdomain service for now. It's really causing me grief because the format works with my computer, but when I go to the URL (in the same browser) on a different computer, everything's fine except for the CSS (fonts, wrappers, etc...). The formatting of the site is way off.
This is my first time actually uploading a site I've created to the web, so I'm pretty new at this. Is there something I'm missing, or?
The full link to my website is http://thexradioonline.host56.com and some of the CSS is below. I'm willing to try anything to get this to work.
#body{
margin-top:0px;
margin-left:auto;
margin-right:auto;
margin-bottom:0px;
background-color:#999999;
}
#wrapper{
height:auto;
width:1000px;
float:center;
padding-left:200px;
}
I would provide more code, but all I know is it's a formatting issue. Again, I've never done this before, so if someone knows the problem, that would be great.
I believe your question is why is your font font-family:neou; not working for every one, this is because you are using a none standard font, that i assume you have installed on your pc but the other machines do not.
You can fix your problem in 3 different ways. The first approach would be to change the font you are using to one that everyone will have, CSS font stack should help here. A second approach would be to choose a font from a library, like Google font that allows you to include a font via a <link/> attribute or JavaScript or #import in your CSS. A third approach would be to upload all the files related to your font onto your server and use #font-face to add it to your CSS, such as :
#font-face {
font-family: 'neou';
src: url('neou.eot'); /* IE9 Compat Modes */
src: url('neou.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('neou.woff') format('woff'), /* Modern Browsers */
url('neou.ttf') format('truetype'), /* Safari, Android, iOS */
url('neou.svg#svgFontName') format('svg'); /* Legacy iOS */
}
reference