Solved

CCS fonts and smooth text

Posted on 2006-11-25
5
734 Views
Last Modified: 2013-12-03
Hi, is there anyway of using H1 with CSS and not have un-smooth text...The text look like pixel text, like when not adding a sharp, smooth effect to text in photoshop....I would rather try CSS than a graphic...:)
0
Comment
Question by:wood1e
5 Comments
 
LVL 30

Expert Comment

by:Steggs
ID: 18011332
Greetings wood1e,

There is no css property to control the smoothness of text.

One thing you can do is cover the h1 text with a graphic.

<h1><em></em>Title</h1>

h1
{position:relative;
width:585px;
height:105px;
overflow:hidden;
}
h1 em
{display:block;
width:585px;
height:105px;
background:url(image.jpg);
position:absolute;
top:0;
left:0;
}

Regards
0
 
LVL 30

Expert Comment

by:VirusMinus
ID: 18013217
This is the best solution available for smooth typography and use of non-standard fonts other than Arial, Verdana etc.

http://www.mikeindustries.com/sifr/

example usage:
0
 

Author Comment

by:wood1e
ID: 18013758
Hi have tried the background image and the text over the top....with veranda, but I can never align the text with the text of the graphic?
0
 
LVL 30

Accepted Solution

by:
Steggs earned 500 total points
ID: 18042302
Hello again,

The text is supposed to be covered by the graphic
0
 
LVL 16

Expert Comment

by:LeeKowalkowski
ID: 18145513
There's currently no supported CSS property for anti-aliasing fonts.  

In Windows, you can enable smooth fonts in the display properties ( http://www.worldstart.com/tips/tips.php/1213 ).  If your users have done this, they won't benefit very much from your efforts to smooth some of the text in your website on their behalf, because the text would have been smooth in the first place.  
0

Featured Post

Migrating Your Company's PCs

To keep pace with competitors, businesses must keep employees productive, and that means providing them with the latest technology. This document provides the tips and tricks you need to help you migrate an outdated PC fleet to new desktops, laptops, and tablets.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
alert before form submission 6 41
stop navigation from wrapping 7 81
Materializecss - Different Behaviors in Browser's 1 37
Only three borders showing on image 5 20
Creating a CSS block that only applies to printing By default, all of your CSS applies to every possible view of your page - whether on screen, printed, landscape, touch-screen, or whatever.  You can, however, add CSS that only applies under certai…
When applying CSS to your HTML, there are many different ways to select which element(s) the CSS applies to.  Some of these selectors are more commonly known and used than others - Here are the more common ones: #X - Matches an ID of X .X - Matche…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to customize the background color and font color of highlighted text using the ::selection element in CSS Begin by defining the selected text as an element in CSS by typing "::selection": Style the ::selection…

809 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question