Please go to this page in Chrome and look at the section Aktualności and text:
Tupacsum Ipsum She nearly gave her life....
Then look at this same URL on Firefox and Opera. Next try to explain to me why this rule: font: 12px normal 'Lato', 'Times New Roman'; is not working on this both (FF, Opera) as well as on Chrome.
Did I make a mistake somewhere? Or did I use something that works only on Chrome?
Chrome:
Firefox:
The browser is just confused by the generic font attribute's values. You need to specify more values so it understands where to apply what.
This works fine:
body #main.home > .bottom .right .top article {
font: normal 12px/normal 'Lato', 'Times New Roman';
}
The solution from #ferne97, though is likely a better practice to not use as specific of a selector, only works because the font-family is explicitly set instead of using the same generic font attribute. If you use the simplified selector with the original font attribute values the problem still remains.
Why don't you change it from body #main.home > .bottom .right .top article to .desc p
.desc p {
font-size: 12px;
font-family: 'Lato', 'Times New Roman';
line-height: normal;
}
Be careful when nesting rules when using LESS, you should never really nest more than 3 levels deep. Think of how you would write the actual selector first, then just nest what is needed.
Related
I've been trying to add a css font style like the one on the landing page of http://www.lecrae.com. The text that says "LECRAE", I'm trying to use the same css style, but it doesn't seem to be working for me, only "W" in the word "Welcome" shows, and it doesn't look like the font too. Here's my code below:
CSS
.header { font-family: Futura, "Trebuchet MS", Arial,sans-serif;
font-weight:700;
letter-spacing:14em;
line-height:1em;
color:#333;
font-style:normal;
font-size:120px;
}
HTML
<h1 class="header">Welcome</h1>
There are three issues here:
Only the first letter "W", of your heading "Welcome" is showing.
The font(s) you specified are not showing.
You want to use Futura, but it isn't available for free.
The first issue is solved easily. You are using a huge letter-spacing of 14em, I assume you made a typo when copying the given source and it was supposed to be .14em. This explains why you can only see the first letter: all other letters are being pushed out of the screen.
The second issue is also solved easily. You are specifying fonts that might not be available on a users computer. For example, most Linux distributions do not ship with any of the fonts you specified and would hence fall back to sans-serif. If you really want to use a specific font, #import that font from a source like Google Fonts. This way, the font will be downloaded by the user's browser.
The third issue is easy as well: you either pay for the font or you need to use a different, freely available font instead.
Putting that together:
#import url('https://fonts.googleapis.com/css?family=Open+Sans:700');
.header {
font-family: 'Open Sans', sans-serif;
font-weight: 700;
letter-spacing: .14em;
line-height: 1em;
color: #333;
font-style: normal;
font-size: 120px;
text-transform: uppercase;
}
<h1 class="header">Welcome</h1>
Also note that you did not copy the text-transform: uppercase rule, which I added here.
I am using the free, open source font "Roboto".
Here is my code:
font-family: 'Roboto',Sans-Serif;
font-weight: 100;
This code works great on my home page. It is thin and looks great.
But on my members area pages, it looks semi-bold.
I thought, perhaps it was because of the browser I was using (Google Chrome), but I debunked that idea because my homepage looks fine while using Google Chrome. Also, I haven't used any other browser.
Any tips on how to fix this issue?
Here is a screenshot to compare.
http://i.stack.imgur.com/XibIK.png
Here HTML code for "Username": (Note, all text on this page is boldish looking. Not just username. So it's not just this code.)
<div class='title'>Username</div>
Here HTML code for "Money doesn't buy happiness":
<h1 class="h1">Money doesn't buy happiness</h1>
As the people stated in the comments, a parent class is over-ruling the h1 and this results in bold text. I also see that you have a class h1 on the h1 element.
CSS
.title, .h1 {
font-family: 'Roboto',Sans-Serif;
font-weight: 100;
}
Or with !important to override the font-weight. Please note that !important will be helpful on classes that you always want to be same. For example on headings or buttons.
.title, .h1 {
font-family: 'Roboto',Sans-Serif;
font-weight: 100 !important;
}
I have a <textarea> inside the <body>. I have applied the following CSS rules:
body {
font-family: sans-serif;
font-size: 16px;
}
textarea {
font-family: monospace;
/* font-family: "Courier New", monospace; */
}
Here's what it looks like in Firefox 31.0:
You can see the result in this JSFiddle. By inspecting the <textarea> with Firebug we can see it does not inherit the <body>'s font-size, but sets it instead to 13px. (0.8em?)
However, if I uncomment the second font-family declaration, strange things happen.
Now the <textarea> seems to inherit <body>'s font-size, even though I didn't change it manually.
Finally, in both cases, Firebug shows that the font-size: 16px of <body> is overridden, even though I didn't find any browser stylesheets there that override it.
This does not seem to occur in Internet Explorer 11 or Chrome 34.
The problem is easily fixed by setting font-size: 0.8em to all <textarea>s, but the cause bothers me a bit.
What may be the cause of this? A bug in Firefox, possibly?
I'm having an odd issue. I have a simple web page, and for some reason the <h1 /> tag is having a margin-top and margin-bottom of over 18px. There is nothing in my *.css file that specifies this. Firefox Firebug shows me the style that is applied, but there is no margin anywhere.
In the picture, the div that the header text is in (or supposed to be in) has the limits. But the header text is pushed down because of the margin.
What could be causing this?? Is there anywhere in firefox/firebug that can show me EXACTLY where that style came from? It says that the header tag inherited from the body style, but that is only this:
body
{
font-size: .85em;
font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
color: #232323;
background-color: #fff;
}
Any ideas? Thanks in advance.
Headers often have a margin by default. Have a look at using a reset/normalization stylesheet.
Reset or normalization stylesheets reset your styles to a standard baseline across all browsers. The difference between reset and normalization is that resets clear margins, padding, etc. where normalization stylesheets apply sensible defaults.
These links should be of use:
https://stackoverflow.com/questions/167531/is-it-ok-to-use-a-css-reset-stylesheet
Reset Reloaded
normalize.css
That's the default styling for <h1>s. It's similar the fact that <h1>s have larger text size than paragraphs. It's just the default. It can also be overwritten.
Most of the browsers add some default margin and padding.
Try resetting the margin, like so
body{
font-size: .85em;
font-family: "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
color: #232323;
background-color: #fff;
margin:0; /* ADD THIS */
}
You can also reset it on the h1
All browsers have a default CSS that is applied to all pages.
Use something like Yahoo's Reset CSS to cancel out any styles applied.
When viewing my application thru Windows7 IE8, I noticed that the Font Size for H1 and H2 Tags are completely off and too large.
This causes the Titles to wrap and wrecking everything below it.
The Font Sizes are set to em and not px, and Im not sure if this is causing the issue.
font-size: 2.7em;
I have XP w/ IE8 and the application looks fine. I also checked this w/ MS Expression Superview, and it checked fine in all of the browsers.
http://www.davincispainting.com
In this ScreenShot the H1 & H2 Titles appear correct. However, if this is viewed with Windows7 IE8 there exists the problem.
Here are the Style Classes for H1 & H2 Tags:
#mid-feature h1 {
color: #FF0000;
font-family: Arial,Helvetica,sans-serif;
font-size: 2.7em;
}
#midlower-feature h2 {
color: #0C2A55;
font-family: Arial,Helvetica,sans-serif;
font-size: 2em;
/*text-align:center;*/
}
You may wish to include a CSS reset page before your CSS. The purpose of a reset is to get the default state of all elements into a consistent state for all browsers, so your particular CSS styling has a better chance of looking the same on each browser.
YUI has a reset you can use.