I built an HTML navigation strip using ul and li tags.
<div id="navLimitedLength">
<ul id="navmenulist">
<li class="menu"><a>Add</a></li>
<li class="menu"><a>Update</a></li>
<li class="menu"><a>View</a></li>
<li class="menu"><a>Delete</a></li>
</ul>
</div>
Intially I set it to have Arial font using CSS as follows:
li.menu a
{
text-decoration:none;
font-family:Arial;
font-size:18px;
}
Then I tried to change the font to Segoe UI as follows:
li.menu a
{
text-decoration:none;
font-family: 'Segoe UI';
font-size:18px;
}
However this also changes the look of menus making them to overlap down
As far as I understand, changing font should not change other styling. This may be since I am trying it in IE8.
But what is the standard way to ensure that things remain in place and behave in desired way.
The difference is caused by different default line heights for different fonts. By CSS specifications, the initial value of line-height is normal, and by the spec, browsers are expected to “to set the used value to a ‘reasonable’ value based on the font of the element”. If you inspect the situation in Firebug, you can see that for 18px Arial, the used value is 22px, but for Segoe UI it is 25px.
In this case, adding e.g. line-height: 1.2 into the style sheet would help.
Different fonts have different standards. So I would suggest you to decrease the line height. It will solve your problem.
Adjust the line-height using firebug in firefox to get the exact line -height
li.menu a
{
text-decoration:none;
font-family: 'Segoe UI';
font-size:18px;
line-height:10px; //this value is for sample purpose
}
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'm using custom fonts in WordPress. I do it by defining font family. I'm having problem if line spacing with One if my fonts. If I use line-height code in my custom css I'd theme, it's applied to all the fonts which isn't required. I just want to change line spacing of problematic font. Can we define line spacing for a font while defining its font family?
Best Regards
You can implement font-family with line-height in one class. I mean something like this:
HTML:
<div class="lato-font">Text</div>
<div class="monospace-font">Text</div>
CSS:
.lato-font {
font-family: Lato, sans-serif;
line-height: 1.6;
}
.monospace-font {
font-family: monospace, serif;
line-height: 1.6;
}
In this case you can set custom line-height for each font.
You'll have to define line-height for each element or class that uses the custom font.
h1,h2,h3,h4,h5,h6,.lead-text,.some-other-class,li {
font-family: ######;
line-height: 20px;
}
I have an admin panel that my users are creating the content.
It has an editor where they can select font size like
<span style="font-size: x-small;">text</span>
What I want to achieve is to override the font style while getting the data from the db.
Any ideas?
CSS:
span {
font-size: 12px !important;
}
You need the css style rule "font-family" so:
<span style="font-size: x-small; font-family: Verdana, sans-serif">text</span>
It's important to keep in mind that browser will apply first font is available, so in this case first Verdana, if there's not it will chose default "sans-serif" font.
font-family it's css equivalent of html "font-face" attrib.
In the following example, it's a navigation bar. Its elements are variable in width, the sum of their width is the width of their container, ul element.
The issue is, each element has the same width on all windows browsers, the sum of their width is 379px. But on mac each browser seems to render the font slightly different, causing the width to either increase or decrease, thus the last element wrap to the second line.
<html>
<head>
<style>
body {margin:0;padding: 0;}
ul {margin:0;padding:0;list-style-type: none;}
.nav {
width:379px;
}
.nav li {
float: left;
margin: 5px;
padding: 20px;
background-color: #0099ff;
color: white;
font-family: Arial;
font-size: 16px;
}
</style>
</head>
<body>
<ul class="nav">
<li>asdf</li>
<li>qwer</li>
<li>test 1</li>
<li>testing test</li>
</ul>
</body>
</html>
The question is, how to guarantee each element's width on all browsers by just specifying the font size.
Setting a fixed-width div plus padding size is tricky when working with text. It's unlikely you'll be able to get a string to render exactly the same size on all major browsers and platforms. Though you can get pretty close; here are some suggestions.
Specify px values rather than pt or em. Such text will render at the same size regardless of device resolution, and will still scale properly when zooming in and out
Use a very common font, or a web font. You can use Font Squirrel to strip down a version of a specific font you'd like to use
Explicitly set the font-smoothing method
Use a computed CSS property to offset the letter-spacing by a fraction based on the amount the resulting div width differs from the target. This will be accurate, but also complex and less compatible
Use JavaScript to do the above calculation instead, resulting in more compatible code
Render some PNGs beforehand, or server-side at runtime
Here's some sample code illustrating one way to get a more consistent cross-platform Arial text render.
html, body {
font-family: Arial, sans-serif;
font-size: 13px;
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
First of all, validate your HTML. You have some issues there, like a missing DOCTYPE. I also recommend HTML5BOILERPLATE to get a lot of normalization done.
Next: why do you make the width dependant on the font size? Wouldn't it be better to make the font size static and set a certain static width to your elements?
If you are scared that this behaviour will lead to reading problems on small sceens (mobile devices), you should read about responsive layouts. They make use of media queries to use alternative CSS based on certain rules.
If you can't get it work, it would be fairly simple to load a .png of the text with a transparent background.
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.