<style>
#font-face
{
font-family : 'Avenir';
src : url("/fonts/Avenir999.otf");
}
p.price a span
{
/*font-family : 'Avenir';*/
font-size : 45px;
color: #889900;
}
</style>
<p class="price" style="border:1px solid red;">
<span>this text is above the middle of red rectangle if uncomment //font-family</span>
</p>
Again, the font is detected properly. Everything works fine. If I use
p.price a span
{
font-size : 45px;
color: #889900;
}
then it is perfect.
But, once I add a string font-face so that
p.price a span
{
font-family : 'Avenir';
font-size : 45px;
color: #889900;
}
the font style changes (great!), but it jumps up almost out of the red 1px solid rectangle. Why? How to fix? Why it happens? that's just the font. No padding, no margin is used.
Firefox is OK, but Chrome is a problem.
It must be something wrong with your font file. I would use Font Squirrel's font generator to build your font files to use with #font-face. It will generate the cross-browser CSS for you to use that should work better across different browsers.
Related
I am trying to render an inline SVG that is base64 encoded that is using a monospace font and TEXT elements to display a simple dungeon. But even though I am specifying a monospace font, the characters do not line up when the line includes glyphs.
This is on Chrome or Safari on Mac, so I assume the Courier font.
Example code:
<style>
.base {
fill: green;
font-family: monospace;
font-size: 14px;
}
</style>
I'm developing a site on Ubuntu. When I look at it in Firefox, it's a lot smaller than when I view it in Chrome. Screenshots:
Both browsers have their default fonts set to DejaVu Serif at 16px. I haven't messed with Bootstrap's default font size. It's still 1rem.
What's accounting for this discrepancy, and is there a way to further normalize the differences between browsers?
EDIT: My scss, even though it's not relevant, because it was requested:
$theme-colors: (
"burnt-orange": #fa7334,
"light-blue": #67e2f5,
"dark-blue": #006f80,
"beige": #f5d5bc
);
.header-icon {
font-size: 1.4rem;
}
#jumbo {
background: transparent;
border: 1px solid grey;
}
#diva-sidebar ul {
list-style-type: none;
padding-left: 0.65em;
}
#footer a {
color: white;
}
.errors {
border: 1px solid #c70f36;
color: #c70f36;
background-color: #ffc0cb;
}
#import "~bootstrap/scss/bootstrap";
#import "~#fortawesome/fontawesome-pro/css/all.css";
.header-icon-link-blue {
color: theme-color("dark-blue") !important;
:hover {
color: theme-color-level("dark-blue", 2) !important;
}
}
.header-icon-link-orange {
color: theme-color("burnt-orange") !important;
:hover {
color: theme-color-level("burnt-orange", 2) !important;
}
}
.color-burnt-orange {
color: theme-color("burnt-orange");
}
EDIT: After adding
html {
font-size: 16px;
}
To my custom.scss file, but the problem persists.
I found a similar issue when designing sites using Bootstrap 4.x. The issue is Bootstrap uses the browser's default font size, and then sets relative font sizes from this. However, Firefox and Chrome seem to use a different default size, which causes issues most noticeably when you are using larger fonts on headings. The easiest solution is to set an exact base font size on the html to override the browser default, like so:
html {font-size:16px;}
I think, you need to prefix your css code. Because, all browsers has a prefix code so: -webkit, -o, -moz ets. Go this Link and past your css left column and copy css from right column: for example: Kindly mark it as Answer if it solved your problem :)
I'm looking to recreate the "Sign in to iCloud" text on http://beta.icloud.com
I have already copied all the styles attributed to that line of text, and everything is in order apart from the thickness of the text. I see Apple has applied the font-weight 300 to the style, which should and does make it thinner, however when I copy and paste the exact same code my browser renders it thicker on my own webpage. My question is, how is Apple making the text thin like that or how can I achieve the same effect?
The code from them that I have used so far is:
position: absolute;
color: #FFF;
left: 0px;
right: 0px;
height: 40px;
top: 131px;
font-size: 35px;
font-family: "Helvetica Neue",sans-serif;
font-weight: 300;
line-height: 1.2;
-webkit-font-smoothing: antialiased;
Any ideas on what could be causing it to render at normal thickness? I have no conflicting styles and this is the only code relating to my line of text
Using the CSS given I can get the same style as on iCloud website. (http://jsfiddle.net/LeBen/WznR5/)
After font-weight, the property that can slightly change the appearance of text on webkit browsers is -webkit-font-smoothing: antialiased;. If you don't use it, the browser fallback to the default smoothing mode (subpixel-antialiased) and result in a text looking bolder.
Are you sure you've included it in your tests and your browser apply it?
Try Avenir Ultra Light it's a thin font that looks similar to it
http://www.typophile.com/node/42590
Is it possible to change the font from the <pre> tag? For example, I don't like the courier font, but I do like the consolas font. Hod od I change this in css?
I tried the following:
pre {
color: white;
font: "Consolas";
}
but that didn't work in Firefox/IE...
Thank you!
Yvan
The font shorthand property requires that you specify the font size.
Use the font-family property instead.
font-family should work. try
.pre {
color: #fff;
font-family:Consolas;
}
In Firefox 3.6, IE7 and Opera 10 on Windows, this HTML has an odd behavior:
<html><head></head>
<style>
span {
font-family: monospace; background-color: green;
}
span.b {
font-weight: bold;
}
</style>
<body>
<span>Text</span><span class="b">Text</span><span>Text</span>
</body>
</html>
The bold span in the middle is shifted down by one pixel. That doesn't happen for other fonts.
Why is that? How can I fix it?
Why is that?
Excellent question. Just spent half an hour trying to figure out the why, to no avail. Marcgg's solution doesn't seem to work, either, the offset is still there. Google turns up nothing. This only seems to happen on Windows, not just in the browsers you mention, but also in Opera 9 and IE6. Not in Firefox 2.0 though. Puzzling.
How can I fix it?
The only solution that has worked so far for me is this:
span {
font-family: Courier; background-color: green;
}
span.b {
font-weight: bold;
}
I.e., specifying Courier instead of monospace. This renders consistently in all browsers I tested (IE6, Opera 9, FF 2.0 under Windows 2000; Opera 10, FF 3, and Konqueror under Ubuntu). As to why, I still have no idea.
It's just an optical effect. Grab a screenshot and zoom in: you'll see the text baseline does not change at all.
It should fix itself if you choose a different colour contrast.
Update
alt text http://img690.imageshack.us/img690/421/opticaleffect.png
The problem is the font "Courier New" which is the default font used my most Windows browsers when "monospace" is requested. For the bold variant, the baseline is at a different offset:
<html><head></head>
<style>
span {
font-family: "Courier New"; background-color: green;
}
span.b {
font-weight: bold; vertical-align:top;
}
</style>
<body>
<span>Text</span><span class="b">Text</span><span>Text</span>
</body>
</html>
With this code, you can see that the middle text is shifted up (= different baseline offset) but the background color is now aligned properly.
The solution is to request "Courier" as a font and to avoid "Courier New".