Transcripción
Extracto de la transcripción automática del vídeo realizada por YouTube.
so yeah both of I can't walk nice little animation well really this talk could have might as well been a title let's learn everything we know or we can about font face so as Jen said I'm Zach Leatherman I live in omaha nebraska anybody from Nebraska
hey one guy I know him but I work for filmer group and our tagline kind of is we want to make the web work for everybody and so we kind of took this brooch when we're thinking about how to implement fine icons but Carl Sagan once said if you wish to make
a phone icon from scratch you have to first invent the universe for any cosmos fans out there so this is kind of the agenda that we're going to go through today we're going to do a little bit about font face I'm going to go over unicode how fonts
look when they load one weird trick that we can use to fix all our phone icon problems and then i'll go through a little bit of my magazine subscription preferences Sarah wasn't a cat person but I am so you guys get a suffer through that all right
so font face was first introduced in the super modern year of 1997 it was in netscape for you can believe that which was only two years after the font tag was introduced in HTML 3.2 you if you guys don't remember the font tag that's okay because pepperidge
farm remembers how about back to font face was first introduced in CSS two and then removed in CSS 2.1 a lot of people don't know that and then re-added and css3 just to go over the syntax really quickly you have a font family at the top you don't
need quotes in there a lot of people say you need quotes but if you just have white space in between your font family name you don't need quotes then a list of URLs pointing to your font formats so the most common the most simplified version just has two
different formats there's a lot of them formats you can choose from and if you ever feel like you're drowning in the sea of different font format so you can just ask our good friend David Hasselhoff he'll tell you what format to use so this is
the can i use layout for browser support for the wha format really good modern browsers have work but if we used woof and only the wha format would be committing the most common mistake in computer science which is the waffle in error it's going to get
better I tell ya all right so we're adding truetype support would be our next our next type that gives us a little bit better android android support there and if we need i ate this actually works for i 6 plus but we have film a group we cut the mustard
for IE 8 plus so this presentation is sort of tailored for that we want to add the embedded open type format and when you're adding the opening embedded open type format excuse me you want to use this there's a URL parsing problem in Internet Explorer
so you want to include this ? pound I you fixed to make it parse the URL correctly so when you add embedded opentype you get ie8 nice but if you want chrome on windows you want to add SVG now chrome on windows already supports the wall format obviously but
it uses a an older text rendering engine called GDI and they're currently in the process of upgrading their text rendering engine to direct right and that upgrade is available in chrome 35 behind a flag so when you look at your phone icons in windows all
the way from XP to Windows 8.1 it's not just an older Windows problem the fonts will not look as crisp as maybe you want them to look and the way to get around that is to add SVG and SVG font to our font stack oops right and when you do that it also buys
us old iOS Safari which is basically not used anymore and our lovely blackberry 6 if anybody tests on that a show of hands who tests on black right 6 yeah that's right that but okay so I've tested this on blackberry 6 cool you don't have to and
you might think that you just plop it at the end of your your source URL list here but that would be a mistake because chrome on windows obviously support some of those other fonts and it when it encounters a font format that it knows it uses the first one
that understands so we get into some pretty gnarly code we actually include a completely separate font face block inside of a media query that's WebKit only which is not the nicest thing but it solves our problem and if you remember a little bit about
blackberry 6 so we added this font face block to our page and we bring it up in our blackberry 6 browser this is what it looks like not great right so blackberry 6 does support SVG fonts but not really because if the text looks all jumbled up so we can actually
[ ... ]
Nota: se han omitido las otras 2.227 palabras de la transcripción completa para cumplir con las normas de «uso razonable» de YouTube.