I'm wondering why the font-size can be so different on my desktop and on my Android (the default browser, Chrome, on an up-to-date system).
In summary, the font-size in <p> (paragraphs) is too big on Android.
I use a CSS reset stylesheet (article in french).
Firefox 25.0 on Linux
You can see that the text of the Lorem ipsum paragraph is decreased (relatively to the text of the page). The Title has larger text.
Android Chrome (cropped)
The size of the text in the Lorem ipsum paragraph is close to the size of the Title. Why Chrome don't display the text with a smaller size?
Example
See the jsfiddle: edit, fullscreen and fullscreen without jsfiddle bar.
The topic is old but still..
I found some workarounds for this. Still fighting though:
If you force the paragraph to have a height, it turns normal again.
Setting <meta name="HandheldFriendly" content="true"/> also fixes all paragraphs instantly.
Enjoy.
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=yes"> in the <head> tag could disable zoom on Android devices
Could use -webkit-text-size-adjust / text-size-adjust property
edit: check this Android Chrome ignoring -webkit-text-size-adjust:none property. Text is being scaled when zoomed out
You might be running into this known issue in Chrome for Android. Relevant text below:
Font size is inconsistent on some sites, such as Reddit and T-Mobile.
We're working on improving the display of non-mobile sites on phones, especially ones that use a large range of styles and fonts.
It works for me in Chrome on my iPhone. Have you tried another browser on your Android device to see if you get a different result?
Also, I would remove that huge CSS reset and start with more basic CSS. That makes things like this easier to debug. How about starting with: http://jsfiddle.net/mb8Db/1/
<style>
body {
font-family:"Century Gothic", helvetica, arial, sans-serif;
font-size: 1.4em;
line-height: 1.5;
}
/* failing on Android */
body > main > article {
font-size:1em;
}
body > main > article p {
font-size:0.75em;
}
</style>
<main>
<h3>Header</h3>
<article>
<header>
<h3>Title</h3>
</header>
<p>Paragraph</p>
</article>
</main>
Related
Firstly, I created style for Mobile view and here is the CSS.
.content>.hello{
font-size: 6vw;
color: white;
}
After that I change some style for desktop view
#media only screen and (min-width:600px){
.content>.hello{
margin-top: 40px;;
font-size: 5vw;
}
So, now when I uploaded the CSS to the server, I can see the media query works well on my laptop.When I resize my browser, it works well. But the problem is after I check the website on my phone, the media query also applied there. It supposed to have font size of 6vw on the phone.
Okay, it is solved. I added this meta viewport.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
and i forgot to update the html file to the server. Took me hours for this problem😩.
When I reduce the width of my browser window, I can see the font size changing.
Isn't that a cache problem ?
Is the phone screen really less than 600 pixels ?
I got into the habit in my link tags of introducing an unnecessary parameter, but I can change its value each time I modify the stylesheet.
<link rel="stylesheet" href=".../styles.css?v=17"/>
The thing is that you have two rules:
General rule
.content>.hello{
font-size: 6vw;
color: white;
}
This is applied to all devices.
Desktop rule
#media only screen and (min-width:600px){
.content>.hello{
margin-top: 40px;;
font-size: 5vw;
}
This is applied to desktop
Possible problems
since the rules have the same selector, therefore they have the same priority, in the case of desktop the one which runs later applies. You will need to either put the general rule before the media query, or transform your general rule to a media query of its own
your phone might have a width of 600px or more, you will need to check the dimensions of the phone in pixels as well
i just try, how about this :
.content>.hello{
font-size: 6vw;
color:white;
background-color:black;
}
#media screen and (max-width:600px){
.content>.hello{
font-size:5vw;
margin-top:50px;
}
}
<div class="content">
<div class="hello">
lorem ipsum dolor sit amet.
</div>
</div>
As explained here, the Apple iPhone (i.e. Safari) rescales the font-size when the viewport changes (i.e. from portrait to landscape or vice versa).
The accepted answer to that question says that, in order to disable this behaviour, one should add:
-webkit-text-size-adjust: none;
(Note: in other posts I've also seen '100%' instead of 'none', which may be preferable, but the distinction seems irrelevant here.)
Accordingly, my main question is why, when I view the following HTML test-file on my iPhone, the fixed-sized font is STILL rendered bigger in landscape as compared to portrait view:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
p {
font-size:24px;
-webkit-text-size-adjust:none;
}
</style>
</head>
<body>
<p>This is an example text</p>
</body>
</html>
However, I'd also like to have it confirmed that the Apple iPhone - and possibly other Apple devices - are the ONLY devices displaying this (to me, annoying) behaviour... is that true?
Incidentally, I find it annoying because I can't test properly on my iPhone if my website (i.e. font-size) is rendered differently on other mobile devices (and I don't fully trust online emulators).
Thanks.
It does appear that this solution is right.. but according to Mozilla it is still experimentall.
These are the full set of values you can try but developers are still working to get the mobile algorithm correct to not have the issue are experiencing. Maybe one of the other values would work better for you.
/* Text is never inflated */
text-size-adjust: none;
/* Text may be inflated */
text-size-adjust: auto;
/* Text may be inflated in this exact proportion */
text-size-adjust: 80%;
/* Global values */
text-size-adjust: inherit;
text-size-adjust: initial;
text-size-adjust: unset;
You can find more information here.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust
I'm using the font Cardiff in a project and trying to apply the style text-decoration:underline to it.
This works fine in Chrome (Version 35.0.1916.114) but Firefox (Version. 29.0.1) the underline is crossing through the text instead of appearing under it. I believe it's something to do with the Cardiff font because when I try a 'Web Safe' font the underline is displayed correctly.
This is how the Cardiff font is being displayed
If I then change the font to Helvetica, this is how it's displayed
I've tried a few things already:
Wrapping the font in a span tag, then styling this as a block and giving it a height
I've also tried a solution provided in another question
Updated...
Using fixes provided by #touko I've put together a solution that isn't really what I wanted to settle for but it works.
I've used a border for Firefox and regular text-decoration for other browsers.
h2 {
text-decoration: underline;
}
Firefox specific CSS styling as explained on this solution...
#-moz-document url-prefix() {
h2 {
text-decoration: none;
display: inline;
border-bottom: 1px solid #4c2f04;
padding-bottom: 6px;
}
}
I hope someone finds a better solution than this though because it's more of a bodge job if anything.
Seems like an issue with the font, you could try running it through the Font Squirrel Web Font Generator to see if that fixes it.
Just dont use vertical-align: middle
The similar problem is here: Link underline appearing above text in Firefox?
But looks like your problem is with a font itself.
I do not recommend to do a hack like border under the text. Search for other font.
body {
font-family: Cardiff;
font-size: 24px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="//db.onlinewebfonts.com/c/5762715ddcc2993805a83fcd2f569ea8?family=Cardiff" rel="stylesheet" type="text/css"/>
</head>
<body>
Demo text
</body>
</html>
You could use border-bottom as underline and set the space below to desirable with padding.
yourtxt-wrap{text-decoration:overline}
yourtxt-wrap{text-decoration:line-through}
yourtxt-wrap{text-decoration:underline}
I'm having some trouble with a font I found on Google Web Fonts.
As you can see in the image posted below, the capital V in 'Versus' overlaps with the 'e' when i'm using Firefox. Though when i'm using Chrome (or IE) it does not overlap and leaves me with an ugly space between the two characters.
Is there any way to fix this and make it look like the one in Firefox? Or should I start looking for another font?
My HTML:
<html>
<head>
<meta charset="utf-8">
<title>Versus</title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<link href='http://fonts.googleapis.com/css?family=Marck+Script' rel='stylesheet' type='text/css'>
</head>
<body>
<div>
<h1>Versus</h1>
</div>
</body>
My CSS:
h1 {
font-family: 'Marck Script', cursive;
font-size: 100px;
color:#444;
text-align:center;
padding:0 50px;
text-shadow: 2px 2px 3px #777;
}
Thanks in advance!
In order to fix the spacing in a font you should use:
letter-spacing: 10px /* How ever much you need */
Without knowing the specifics on the HTML and the CSS you already have in place, you can fix the problem area by using something like this:
style
span { letter-spacing: -4px }
html
<span>V</span>ersus
It's hokie, but it should work.
Firefox nowadays supports kerning when using a font with kerning pairs. Other browsers haven’t caught up. There are several proposed CSS features that would affect kerning, and Firefox has some support to them, but the other browsers don’t.
So you should look for another font. Manually tuning spacing by letter-spacing or margin properties is troublesome and risky; you easily end up with breaking things on Firefox.
If you keep using the Marck Script font, it is better to download it and install it on your server and use it from there. There are problems with many Google fonts when used on the Google server. In this case, IE 9 in Standards Mode does not use the font; the error code CSS3117 appears in the console, so there is apparently something wrong in Google settings.
For some odd reason any background styles I set on my (being loaded within a modal if that makes any difference) are not rendering in IE7 or IE8. It all looks completely fine in all other (real) browsers (including IE9). My code is as follows:
<hgroup>
<h6>Request Information Form</h6>
<img src="/images/x-close.png" alt="Close" class="close" />
</hgroup>
I know you aren't supposed to put anything besides <h1>-<h6> within an <hgroup>, but I need this little close img in there, and even when I've tried pulling it out, I ran into the same problem (plus it all "seems" to validate).
The CSS is:
hgroup {
position: relative;
width: 668px;
height: 32px;
margin: 0 0 16px;
padding: 14px 14px 0 14px;
background: #B66115 url(/images/modal_header_bckgrnd.png) repeat-x 0 0;
font: normal 20px/20px 'crimson Text',Georgia,serif;
color: #F6F5EE;
}
Also, I have declared <hgroup> as display:block, and I am using the IE shim. All I keep getting is a white background (which really doesn't work when I have white text in the block!).
Thanks in advance for any and all help.
IE7 and IE8 do not load html5 tag names into the document. Any unrecognized tags are ignored. Try adding a bit of javascript to manually add them (or use something like modernizr.js).
<script>
document.createElement('header');
document.createElement('hgroup');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
</script>
being loaded within a modal if that
makes any difference
Does your modal window use an iframe?
If so, you also need to run your HTML5 element shim script inside the iframe.
Use the HTML5 Shiv.
On a slightly unrelated note, you're using <hgroup> incorrectly. It's only supposed to contain one or more hN elements, and nothing more.
Using your code above, you should be using <header> instead.