|
CSS - @font-face Aliasing
When I embed a font using @font-face it does not seem to be anti-aliased.
If I use Cufon YUI (Javascript) to embed the same font then it looks much smoother (images attached). Is it not possible to have smooth fonts using @font-face? Maybe it depends on the font? But then why does the JS version look so much smoother? EDIT If I just use the font normally it still looks bad, so I guess the Cufon conversion process somehow improves the font, which is displayed using HTML5 and Canvas. Similar TutorialsHey guys, this thread is mainly out of curiosity. Up to this point in time, I have been under the impression that font anti-aliasing is not yet available (possibly CSS3, not sure). However, I'd like to know how this site seemingly anti-aliases their fonts: http://www.istockphoto.com/file_sea...=file&text=test The font that is appearing as anti-aliased is the 'Search Results: test' I have anti-aliasing in XP and in my browsers turned off, how was this effect achieved?? Hey everyone. I've been reading up on @font-face, and to me it seems like not many people are using this. Its more or less supported in all browsers (well, not ie 6) so was wondering if there is a reason no one is using this that I'm over looking? If not it seems awesome, and I think it will make the designers here giddy with joy. I am trying to install some fonts onto my website. I am having a problem with @font-face. I have followed the proper steps as told to me by multiple sites and I place the font I want to install into my website in the main directory and type up the code but it still doesn't work. Code:
@font-face{
font-family:'LithosPro-Regular';
src: url('LithosPro-Regular.otf') format('opentype');
}
h2 {
color:#30F;
font-family:'LithosPro-Regular', georgia, serif;
}
Is there something else I need to add or do? I appreciate any help as I've been stuck on this for days! Hi guys, I have a stylesheet with the following styles pointing to font files in the same directory and then a h3 that should be using this font. I can't for the life of me get it working though, any idea why this could be? Code:
@font-face {
font-family: "Chunkfive";
src: url("Chunkfive-webfont.eot");
src: local("?"),
url("Chunkfive-webfont.woff") format("woff"), url("Chunkfive.otf") format("opentype"),
url("Chunkfive-webfont.svg#filename") format("svg");
}
h1, h2, h3, h4, h5, h6 {
font-family: "Chunkfive", Verdana,
sans-serif;
color: #4088B8;
clear: both;
}
h3 {
display:block;
/*position:absolute;
right:-5px; top:15px;*/
-webkit-transform: rotate(-2deg);
-moz-transform: rotate(-2deg);
-ms-transform: rotate(-2deg);
-o-transform: rotate(-2deg);
transform: rotate(-2deg);
text-shadow: rgba(136, 164, 174, 0.496094) 3px 5px 3px; font-family: "Chunkfive", Verdana, sans-serif;
margin-top: -10px;
}
<h3>Websites / Examples</h3>
ANy help would be greatly appreciated Thanks GP On my Local Server and Development these work perfect. Code:
/*#########Font-Face: Arial-########*/
@font-face {font-family: Arial Rounded MT Bold;src: url(/templates/shushme_deals/fonts/Arial Rounded MT Bold.eot);}
@font-face {font-family: "Arial Rounded MT Bold";src:local(Arial Rounded MT Bold), url(/templates/shushme_deals/fontsArial Rounded MT Bold.ttf) format("truetype");}
@font-face {font-family: Arial Rounded MT;src: url(/templates/shushme_deals/fonts/Arial Rounded MT.eot);}
@font-face {font-family: "Arial Rounded MT";src:local(Arial Rounded MT), url(/templates/shushme_deals/fonts/Arial Rounded MT.ttf) format("truetype");}
For some reason on live production site, it does not load the fonts at all. What I'm I missing here. Hey everyone, the development site I'm working on is here.... http://firstchoiceflooring.stealthwd.ca/ The font in the top navigation is Media Gothic.... well, it's SUPPOSED to be. It's rendering really strange. I'm using @font-face. My font looks fine in photo shop, but it doesn't render correctly in FF or website (no IE yet). My CSS is like this.... Code: @font-face {
font-family: mediaGothic;
src: url( "http://firstchoiceflooring.stealthwd.ca/images/fonts/Md_Gothic11.eot" ); /* IE */
src: url( "http://firstchoiceflooring.stealthwd.ca/images/fonts/Md_Gothic11.ttf" ) format("truetype"); /* non-IE */
}
Code: #topNavContainer p{
height:100%;
width:100%;
text-align:center;
font-family: mediaGothic;
}
Any help would be appreciated. This is my first time using @font-face Has anyone else dealt with a problem with using custom fonts w/ @font-face and Ipads? I have a site http://osake.garychus.com and throughout the site the font Lato is messed up, but on all other platforms it looks great. Hi everyone. Here is the url http://v3p2.stealthwd.ca/ its the dev version of my companies soon-to-be-new website. The font-face code is... Code: @font-face {
font-family: 'SlingLight';
src: url('/fonts/sling/slinglight-webfont.eot');
src: url('/fonts/sling/slinglight-webfont.eot?#iefix') format('embedded-opentype'),
url('/fonts/sling/slinglight-webfont.woff') format('woff'),
url('/fonts/sling/slinglight-webfont.ttf') format('truetype'),
url('/fonts/sling/slinglight-webfont.svg#SlingLight') format('svg');
font-weight: normal;
font-style: normal;
}
Any idea why its timing out? Thanks Hi there, I'm completely new to CSS. I'm trying to do this more than one hour but can't get it right. Code: <font color='white'><font size='1' face=verdana size=1> I couldn't find the equivalent of this in CSS This is my last experiment but it doesn't seem to work either Code: fontstyle { color : #FFFFFF; font-family : verdana ; font-size :1;}
Thanks Hello I have the following CSS rule for some text: .Text { font-size:13; color:#2C506A; font-weight:bold; } When the browser renders it, it uses anti-aliasing to give it a better look. I am interesting in displaying the same text without anti-aliasing. Is this possbile via CSS? is there a way to tell the browser to not anti-alias the text? If so, how? regards Hello all, I'm fairly confident that this is a CSS question. If not, please accept my apologies and kindly refer me to the appropriate forum. Okay now check out the Sprint PCS site: Click here Now, directly under the "Shopping" tab, it says, "Sprint PCS Vision Smart Device." This is text but it has been anti-aliased and looks amazingly good. Is this a CSS technique? If so, how is it done? Many thanks, SAW Hi there, Does anyone know what font this is that is used for text such as "Everything you need to get a professional website online" at the top and below: "Takeaway Website Standard" When I highlight it, it has a black bacground which is unusual. Any ideas? Thanks! I have a 'DIV' tag, its css height property is set to 15px. Why is it, that it's not really 15px until I insert "font: 10px Verdana " *** one of the rules? So fi I have: #topSeperate { height: 15px; width: 100%; background-color: #00FF00; font-weight: bold; font: 10pt Verdana; } The div is perfect, but as soon as I remove the font: tag, it grows in height about 4px even though there is no text typed in the 'DIV'. If this doesnt make sense and you need further explaination, Let me know. Hi guys I've started this thread in this CSS forum, because I need to find a solution in CSS code. I was given the following image. I must make same menu, using CSS. But this is not a problem. My problem is to find in css a real typography that mimics following image. Does any1 know which css code and which font should I use ? The man who gave me that image doesn't know which font was used Thanks a lot in advance I'm trying to write a website at the moment and I want to use <h1>/<h2> etc for the headings. Problem is though, the heading is going in to a blue bar and the font needs to be the right size. And naturally, IE and FF display the font in different sizes How would I fix this problem so that the font renders the same size? Could I make a hacked CSS class that only IE can see that I can apply to the <h1> tag to change the font-size to make it the same size as FF displays it as? Well, the title might be a little oversimplified, but I guess it caught your attention In the past, I always set my font sizes using px. I know that this is not the appropriate standard (since it doesn't allow a user to re-size the font on their end), but I usually did it because it was easiest and most predictable. Now, I finally want to make the step towards more accessibility and I would like to learn a little bit more about using em's appropriately. Does anyone have any good advise on how to get started with the following questions: How/where do I set the initial font-size, from which I can use em's? What are the dangers of using em's instead of px? Where could this change impact my usual styling? Are there any good resources/tutorials about this? Any help/suggestions/ideas are appreciated... Hello, My font shorthand have this different outputs on IE and FF Quote: h1 { /*font-size: 16px; font-weight: bold; font-style: normal;*/ font: normal medium bold 16px Verdana, Arial, Helvetica, sans-serif; margin: 0 10px; padding: 15px 0 5px 0; color: #FFF; } If I replace the font-variant at shorthand it works well on IE but still the font size is not rendered Quote: font: normal larger bold 16px Verdana, Arial, Helvetica, sans-serif; the commented long hand is what I'm trying to get I'm making a site, and the guy I'm making it for says he wanted a more 'tough' font. So I downloaded a, 'tough' but still readable of course, font. The main page has an iframe, and the content in the iframe is where the text goes that has the tough font. Everything works when it's offline. But when I try uploading it, it's the old font. I even check the source and it's all old. The server is running extremely slow right now, so that might be the problem and it just hasn't uploaded yet or something. Because I also deleted the content files and refreshed the page and it was still old. So, I'll wait a little longer and check or something. I also know that viewers can't see custom fonts if they don't have them on their pc. So this is kind of seeming pretty pointless. But is there ANYWAY I Can make it viewable to everyone that views the site. So they can see the font even if they don't have it on their pc. Like, make them have it temporarily or something. My friend told me it had something to do with CSS, but I don't really know. Anything I can do to make it work? Is there maybe a Java Script I can use? I would like to set my site so that any text not given a specific class id for CSS will appear as a certain font. can I do this, and if so, how? thanks. Hello, I have something has follows: <div> ... <table> ... </table> </div> My document font size is 1em. My div font size is 1.4em. What should be the font-size in my table to get back to the 1em of the document? Thanks, Miguel |
|||||||