I have been playing with Prettify and I got it working quickly. However when I tried to change the font in the css file i can't seem to see any change in the browser. I am using Silver Stripe as a CMS. In the CSS file from the website I have:
.typography * {
font-family: Ariel, sans-serif;
}
I have a separate CSS for prettify (and I know it works because the bg color changes, etc. only the font-family and font-size doesn't. Strangely font-weight does work).
pre.prettyprint, code.prettyprint {
font-family:monospace; /* doesn't work why? */
overflow: auto;
display: block;
font-size: 8pt; /* doesn't work */
background-color: #333; /* this works */
}
I am using Safari. I don't understand what I am doing wrong? I only seem to get an Arial font.
Apparently Safari doesn't support the monospace correctly. See more about it:
http://www.markwyner.com/post/16123207332/safari-vs-monospace-fonts
Here you can find the appropriate font for Safari to support:
http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html
For the not working measurement unit - pt try using another unit to see if it gives you any result. Let me know if it worked.
Related
I have a problem with certain CSS applied to my website. I use some CSS to set the color, size and alignment of text. It works fine on the desktop browser, everything looks how it is supposed to be. The problem happens only when I load the page on my android chrome. At certain times it shows the CSS properly, but after I refresh it, the text becomes much smaller. Yet, some other text on the page that uses the exact same CSS does not change at all.
Note that the following CSS property is only applied to a mobile phone screen size. I use the CSS Media Queries to do so.
Here's the CSS I am applying:
.list {
color: white;
padding: none;
display: block;
margin-left: 0px;
margin-right: 10px;
text-align: left;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif;
font-size: 100%;
}
It also happens with some other CSS on the page. It keeps on changing upon refreshing the page.
Added information:
This is what it is suppose to look like.
This is how it looks like most of the time.
Both list uses the exact same CSS properties.
Please do provide me with some help. Thank you.
The main reason is that you are using % try rem. You may need to do mobile queries for font sizes on other screen types.
font-size: 100%;
change to:
font-size: 1.8rem;
This could be too big
Because you're using a percentage for font size, it's based on the size of the parent container. A better approach is to use rem or px. Here's a nice article explaining all of your options
I ask this because when I try to create a CSS font stack for multi-language content, such as English and Chinese, the final rendering is affected by the first font in the stack (usually Latin ones, since most Chinese font comes with Latin support).
See this Codepen, for example.
div.a p {
overflow: hidden;
}
p {
background-color: red;
border: 1px solid black;
display: inline-block;
}
.chinese-only {
font-family: "Hiragino Sans GB", sans-serif;
font-size: 24px;
line-height: 48px;
}
.english-chinese {
font-family: "Avenir Next", "Hiragino Sans GB", sans-serif;
font-size: 24px;
line-height: 48px;
}
.chinese-english {
font-family: "Hiragino Sans GB", "Avenir Next", sans-serif;
font-size: 24px;
line-height: 48px;
}
What I am seeing:
Since Chinese glyphs only appear in the Hiragino Sans GB, I expect all Chinese blocks to use the same line height. But they are apparently affected by adding the Avenir Next font at the top of the stack.
Since both Firefox and Chrome on OSX renders my example the same, I wonder if the CSS specification mentions anything about this. CSS 2.1 fonts spec doesn't appear to state what to do with line height when you fallback on missing glyphs.
Updated: Safari does render differently, but unfortunately the difference is due to overflow: hidden, not glyph fallback. My updated example may show this a bit clearer.
On Chrome and Firefox
On Safari
And if you are really into font-related headaches, try this example showing different font stacks, and see how they differ on each browser.
This is pretty much going to come down to the user agents. Any time the CSS specification says, “not defined by this specification”, that’s code for “we’ll let browsers do whatever they think is best and then try to get them all to behave consistently after a few years of doing it differently”.
Furthermore, the latest CSS Inline Layout Module states right at the top of Section 1 (Line Heights and Baseline Alignment):
This section is being rewritten. Refer to section 10.8 of [CSS21] for the normative CSS definition or the 2002 Working Draft if you want pretty pictures. (But ignore the old text, half of it’s wrong. We’re not specifying which half, that’s to be determined.)
That’s from last month. So, you know, good luck and Godspeed, basically.
Interestingly, I see a different result in Safari 6.2.2 than you posted:
If there’s a difference between that and the latest Safari, you might be able to track down a bugfix between the two versions that explains why it changed.
Please take a look at my site: http://burnett.inigowebdesign.co.uk/local_area
I am using Twitter bootstrap CSS (with HTML5 Boilerplate), Modernizr, and Google fonts using #font-face.
I am using modernizr to test for a browser's support of fontface- it not supported, I need to change the font-size (otherwise it will be far too large)
I am testing the site for compatibility and have noticed in IE8 (and early versions of Safari & Opera) my rules for font-size are being ignored. In particular, the h3 elements in the main list (that you can see on the left in the green box) don't seem to respond to any CSS I apply to them. I am using Firebug to inspect the rules, and can't find any possible conflicts. It even ignores !important. In fact, the only way I can style them at all is to use inline CSS.
What is going on??
The text is differ due to different font-size define in each css file.
In normalize.css h3 have 1.17em font size and in fontface.css font size define 50px . It might be possible the browser rendering the file in some different orders.
normalize.css file using this property.
h3 {
font-size: 1.17em;
margin: 1em 0;
}
fontface.css file using this property.
h3 {
font-size: 50px;
/* letter-spacing: normal;
font-weight: normal;*/
line-height: 36px;
}
I built a site and the problem is, chrome display font-size 1px bigger than Firefox. I tried several ways to match the font-size, specified it in px, in % set the body to 100% and then the elements to 0.875em. None of those work. It stills display 1 pixel greater in chrome.
This is the code I'm using for font-sizes:
body {
font-size: 100%;
}
* {
margin:0;
padding:0;
text-decoration: none;
font-family:helvetica, arial, sans-serif;
}
#geral {
width:1000px;
margin:0 auto;
position:relative;
font-size:0.875em;
}
Where the #geral wraps the entire site and there is no other font-size statement on the CSS, the source can be viewed in the link I posted.
I wonder if there is a way to fix that or if I'll have to specify different font-sizes for each browser?
I suggest you use a CSS reset like the one from YUI. It will make your pages much more consistent across all browsers, including font rendering. It makes the biggest difference with IE and the other browsers, but it gets rid of all manner of inconsistencies.
Fwiw at this date, I myself have just recently learned that good CSS-coding practice is to define absolute font-size only for the HTML or BODY element, and to define all other font-sizes relatively, that is, in terms of this size (i.e., using em or %).
If you do that, you only need single out webkit browsers (Chrome, Safari) from the others (Gecko, IE, etc.). So, for example, you might have defined in your stylesheet,
body {
font-size: 16px;
}
Then at the bottom of the stylesheet, you can include this
#media screen and (-webkit-min-device-pixel-ratio:0) {
Body {
font-size: 20px;
}
}
(See also Chrome conditional comments)
This works for me. But one side-effect is to also rescale any non-text elements that are sized relatively, and this may or may not be desirable.
<script>
if(navigator.userAgent.indexOf("Chrome") != -1 )
{
var fontsize = "<style>body{font-size: 125%;}</style>";
}
else if(navigator.userAgent.indexOf("Opera") != -1 )
{
var fontsize = "<style>body{font-size: 100%;}</style>";
}
else if(navigator.userAgent.indexOf("Firefox") != -1 )
{
var fontsize = "<style>body{font-size: 100%;}</style>";
}
else if((navigator.userAgent.indexOf("MSIE") != -1 ) || (!!document.documentMode == true )) //IF IE > 10
{
var fontsize = "<style>body {font-size: 100%;}</style>";
}
else
{
var fontsize = "<style>body {font-size: 100%;}</style>";
}
</script>
<script>document.writeln(fontsize);</script>
Works fine here:
Chrome 9.0:
Firefox 4.0 beta 10:
em is scalable and px is not. Set the font to a defined px size and you should be ok. em can be desirable in certain circumstances, but if you are worried about 1px then you should set strict pixel sizes.
EDIT: Just reread and I see you have tried setting the height as pixels already. Don't have a clue then as I don't have Chrome installed here to test. :(
if you have web page to print then
add css
<link rel="stylesheet" type="text/css" href="report.css" media="print" />
in css file
body {
padding: 3px;
margin: 0.5px;
background-position: center;
color: #000000;
background: #ffffff;
font-family: Arial;
font-size: 13pt;
}
this works for me
I too have had this problem and I've decided, where possible to go with font-size: small (or x-small etc). This gives you a basic range of scalable font sizes without having to look for fiddily css or messing around with JS. It works with IE, FF and Chrome.
I'm getting a good enough similarity in rendering between Firefox and Chrome when I use this css (it works because Firefox does not yet implement 'zoom'):
body {zoom: .7}
But it still isn't pixel perfect.
Note that I use 'rem' units instead of 'px' units everywhere, as this works better when I use more than one font on a page.
Note that I've set Windows display resolution to 150% to compensate for my poor vision. When I set it back to 100%, the problem of different sizes remains. So this isn't the issue.
I'm sure there is no standard that says that pages must look the same on different browsers, but using 'zoom' seems to help in this regard.
Unless this scale factor problem is due to a misconfiguration on my computer.
i am using FF as the main testing platform and Chrome (for Mac) as the secondary.
I just noticed that Chrome is showing ~20px off positioning for CSS. (just to be clear Chrome is showing the TEXTAREA ~20px down as compared to FF)
Also Chrome is not obeying the width CSS property for TEXTAREA.
Is it just me or everyone is having this problem? I thought IE was crazy.
TEXTAREA {
background-color: white;
border: #ccc 2px solid;
color: black;
font-family: calibri, helvetica, arial, verdana, ms sans serif;
padding: 10px;
font-size: 16pt;
font-weight: normal
min-width:320px;
min-height:138px;
max-height:138px;
resize: none;
}
Is there a solution??
I think it would help if you could show us your 'troublesome' page. Maybe make a copy and upload it to the web so we can give it a check?
Whatever the case, I'm sure it has something to do with more than just the textarea itself. Perhaps its one of the containing elements, a rule on a parent div or table td or who knows. Since it's a textarea, I'm pretty sure there's a form or submit of some type involved so yeah, please show us more of your code ;)
You might find this useful anyway so that you can edit your code individually for moz or chrome:
Gecko browsers (FIREFOX):
#-moz-document url-prefix() {
/* Gecko-specific CSS here */
}
WebKit browsers (CHROME, SAFARI):
#media screen and (-webkit-min-device-pixel-ratio:0) {
/* Webkit-specific CSS here */
}
Cheers
Different browsers have different defaults. Add the following to the top of your CSS file:
* {
margin: 0;
padding: 0;
}
Also, what doctype are you using? If XHTML then "TEXTAREA" needs to be lowercase.