I'm trying to use the same font from Apple presentation in my own HTML. I've tried using console to determine the font, but apparently is not the correct one.
https://help.apple.com/osx-mavericks/whats-new-from-lion
this CSS is not good, even if it's the same on Apple page.
{ font-family: "Lucida Grande", "Lucida Sans Unicode", Helvetica, Arial, Verdana, sans-serif;}
this is my version
Any ideas how they do it?
They are doing something a little tricky. They are using a background image with the anti-aliased text saved as a png. Then using color: transparent on figure h1, figure h2 to hide the actual rendered HTML text. That allows them to control the exact experience from a graphic editor, but allows the page to be crawled by a search engine, or if someone wants a text only version of the page.
Its an image and the text they have made font color transparent. No rocket science about it. color: transparent
The CSS you posted is only a small part of it and they may not be even using it. Check out: https://help.apple.com/osx-mavericks/en.lproj/img/S0010_iBooks/S0018_Header.png
Related
I have created a question mark button using the Arial font.
The CSS looks like this:
.question {
font: bold 24px Arial;
}
It appears correctly on almost all browsers, as this screenshot shows.
However, newer versions of Android use the Roboto font face instead of Arial. The question mark is now off-center and the wrong width.
My question: is it possible to force the browser to use Arial?
You cannot force a device/computer which doesn't have Arial installed to use it. You would have to rely on webfonts to use Arial everywhere.
Also, your syntax is wrong, you should be using the shorthand property font, and not font-family (which is only used to specify the font face and potential fallbacks), like so:
.question {
font: bold 24px Arial, sans-serif;
}
some users of our site (Link) that are using chrome say that the text blocks aren't showing on the site for some reason.
I use Chrome too and everything works fine. I attached a picture of the problem below.
Hope somebody can help fix that problem.
Text blocks aren't displayed:
Try to set a fallback font-family on your elements which does not already have it.
When I inspect one of your h1 tags I can see that the font-family is set to the following:
font-family: "Fira Sans";
Try to set that to:
font-family: "Fira Sans", Helvetica, Arial, Verdana, sans-serif;
As you have it on your body tag.
Apply this to all the elements which does not already have a fallback font.
Let me know if it solves the problem :)
I was developing a website on a iMac and the character 'Š' was rendering properly, then I got some feedback that I missed the 'ˇ' symbol. I double checked it and I had spelled it correctly.
Does anyone know any 'CSS hack' or something to get the character rendered right?
I've tried text-shadow, anti-aliased font rendering without success.
Both examples were made on Google Chrome and font was imported from typekit using:
http://use.edgefonts.net/raleway:n1,n2,n3,n4,n5,n6,n7:all.js
Here's the code incase imgur and jsfiddle decide to drop the links:
* {
font-family: 'Raleway', sans-serif;
font-weight: 300;
text-transform: uppercase;
font-size: 16px;
}
http://jsfiddle.net/aYFw2/
This appears to be a problem with the font, when some font rendering techniques are used. You can see similar problems with characters like Å and É. Depending on font size, the diacritic marks may be cut off in part (e.g. so that just a small dot appears) or completely. E.g., in size 24px the problem does not exist.
The conclusion is that if you wish to such small font sizes, or want your text to be legible in small sizes, you should use a different font.
I'm using Open Sans font from Google Fonts on one of my page, and altho I'm using almost the same style regarding the font as Google does, my diacritics are somewhat thicker than the rest of the letters:
(you can see the live version at www.cabsurf.com)
The only difference in my CSS is the way I declare the font family:
font-family: 'Open Sans', Helvetica, Arial, sans-serif;
But it will look the same even if I leave only Open Sans in the declaration.
I've placed the same text in Google Fonts page above (using inspect element in Chrome) and the text is rendered correctly on their side, so I know the font is ok.
Any idea what am I doing wrong ?
EDIT:
Using Chrome 27 / Firefox 22 on MacOS X 10.8.4
Google will use any sub-set of the font it wants. Did you make sure to check the correct boxes when you got the code for it?
When I append <link href='http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800,300&subset=latin,cyrillic-ext,cyrillic,latin-ext' rel='stylesheet' type='text/css'>to your <head>, all the characters look correct.
Just make sure to check whichever sub-sets you need so you don't get unnecessarily large files.
So, I pulled Arial over onto Linux from my former Windows distribution, but I then had to fight with the 12px Arial issue. I fixed that as suggested by resizing it to 13px, but I decided that I actually much preferred Google Calendar in Liberation Sans as I'd had it before.
I've used Stylish to fix that for the main part of the calendar, but I can't get the Google Tasks section to use Liberation Sans because it uses much more complex/strange CSS selectors.
Firebug says the font-family of the Tasks section is defined by div#:x.tl.U, with HTML
<div id=":x.fc" class="bb" style="height: 165px;">
<div id=":x.tl" class="U Rb">
<table class="v" cellspacing="0" cellpadding="0" style="width:100%">
(lots more nested tds/divs here)
</table></div></div>
but using
div#:x.tl.U {font-family: "Liberation Sans", Arial, sans-serif !important;}
or even
div#\3a x\.tl.U {font-family: "Liberation Sans", Arial, sans-serif !important;}
doesn't produce any results. For the main (month / 2 weeks view) section,
div.st-c-pos {font-family: "Liberation Sans", Arial, sans-serif !important; }
works fine (altering exactly the element Google uses to define the font-family).
How do I work with these selectors? I do know some CSS but that kind of complexity is beyond me. (Also if someone could explain what the different "., :" etc. parts mean...?)
Edit: It's not just the Tasks section, the week view also displays a mixture of Arial and Liberation Sans. I've defined the font-family for the body element as well, but that doesn't really seem to inherit... Any better ideas than just hunting down every single declaration of Arial in the page and replacing it manually?
Adding that HTML does help, though as you say, that ID name is pretty weird. However, your first shot at div#:x.tl.U looks right to me, as it chains the ID and class. So it's most likely that the inner elements also have a font-family declaration of Arial that is overriding your rule.
I suppose, as a test, you could try something like this, though it's a bit of a sledgehammer option that may not suit anyway:
body * {font-family: "Liberation Sans", Arial, sans-serif !important;}
Otherwise, have a look at the inner elements and see if any of them have explicit font declarations.