I have this snippet in html:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<style>
body<-->{
font-family: sans-serif
}
</style>
</head>
<body>
Text
</body>
This comes out OK on Firefox and IE, but it comes out in italics in Chrome. What is going on? There doesn't seem to be a way of stopping it.
For that matter this text that I'm now typing also comes out in italics.
Doing a Google search below reveals that this is a font problem in Chrome.
You'll need to read a little further for solutions:
https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=google%20chrome%20all%20italics
Related
I'm not a css expert and i'm experiencing some trouble with cross-browser behaviour. In Google Chrome, my code works fine. In the other browser's i've tried (Mozilla, Edge, IE) it doesn't; specifically when using these last browsers, the font-style property seems to exclude the font-weight property
This is my html and css code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.non-italic-class{
font-size: 25px;
font-weight: 900;
font-family: "futura-pt", sans-serif;
}
.italic-class{
font-style: italic;
}
</style>
</head>
<body>
<span class="non-italic-class">NON ITALIC</span>
<br>
<span class="non-italic-class italic-class">ITALIC</span>
</body>
</html>
Here's how it looks like in Chrome (fine for me):
This is how it looks in Mozilla, Edge, IE (wrong for me):
Am i doing something wrong? Do i need to add some code in order to get the same behaviour with all these browsers?
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 trying to create a presentation using Slidy, and I want to increase the default font-size.
Slidy presentations have default styling set in this CSS file, which includes the line font-size: 14pt; in the body element.
Here's a minimalist Slidy presentation where I override this font size in a style block in the page head:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<link rel="stylesheet" type="text/css" media="screen, projection, print"
href="http://www.w3.org/Talks/Tools/Slidy2/styles/slidy.css" />
<script src="http://www.w3.org/Talks/Tools/Slidy2/scripts/slidy.js"
charset="utf-8" type="text/javascript"></script>
<style type="text/css">
body {
font-size: 128pt;
}
</style>
</head>
<body>
<div class="slide">
<p>Some text that ought to be bigger.</p>
</div>
</body>
</html>
In Internet Explorer, the text is large, as I expected. Firefox and Chrome display small text however. They definitely notice the style block in the page (I can change font-family, or other CSS properties here); they just doesn't seem to want to change the font size.
How should I specify that I want a large default font size?
#f.n174's answer is probably the correct way to fix things for a general xhtml page. Slidy seems to be doing something odd with CSS evaluation, so we need to expoit a trick to change the default font size for all types.
The contents of a slide are contained in an item of class slide, so we can change the font-size for all text tags at once using:
.slide {
font-size: 128pt;
}
This works in Firefox, Chrome and Internet Explorer.
add style="font-size:128px" in your body element as an attribute if this not worked add the code in your <p> element
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.
Recently I've made custom CSS only (imageless) checkmarks and radio buttons.
I've used this piece of CSS code for checkmark content: "\2714";, but I have issues with sizing that checkmark, it stays "small" no matter what, any idea how can I make it bigger?
font-size seems to work just fine for me in FF 10:
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
p:before {
content: "\2714";
font-size: 30px;
}
</style>
</head>
<body>
<p>Hello there</p>
</body>
</html>
EDIT: Chrome and Safari also seem to work with no issue.