 Saya akan membuatnya cepat kerana saya rasa semua orang mahu balik rumah. Saya akan bercakap sedikit tentang fonds CSS. Ini hanya berlainan. Saya akan bercakap sedikit tentang fonds CSS. Saya suka fikir bahawa yang terbaik kita mempunyai fonds web dalam projek sebelumnya. Mungkin anda akan mempunyai mereka. Mungkin anda telah menerima atau mempunyai atau mempunyai jenera fonds dari jenera fonds, atau jika anda benar-benar memperkenalkan dengan tangan, saya akan memperkenalkan anda. Tapi anda akan memperkenalkan bahawa ada banyak format. Kenapa di luar kita mempunyai banyak format? Jadi, sedikit cerita. Maksud saya, fonds pertama adalah fonds yang membuat penggunaan di depan. Apabila resuliti jenera jenera jenera, anda akan bermain 8-bit dan anda fikir itu sangat hebat. Tapi perkara-perkara, walaupun jenera jenera jenera jenera jenera jenera, apabila anda mempunyai hal yang dikeluarkan, anda masih perlu resuliti jenera jenera untuk berkelihatan. Jika tidak, anda akan mempunyai jenera jenera jenera. Jadi, fonds pada masa itu, kita benar-benar perlukan sec monitoredج massacre daripada lo flourish. Walaupun jenera jenera jenera berlouik malah tidak memberi unfortunate kebenaran, yang anda inginkan? Anda akan membuat burgers pada masa mereka belum awak�� жиз memperkenalkan ilm momen jenera. Jadi, pada tahun 1975, saya mungkin akan dapatkan salah sebab saya tidak mempunyai teman-teman di depan saya. Donald Moose membuat sesuatu untuk sistem teks yang akan membuat kompres bid-map fonds. Tetapi, John Warnock adalah fondor dari Adobe. Dia sebenarnya datang dengan Post Script, yang saya rasa yang paling kami lebih kenal dengan itu adalah fonds dekter yang pertama. fonds dekter sebenarnya adalah idea yang hebat dan itu teknologi yang kami masih menggunakan sekarang. So, yang sebenarnya terjadi dan yang sebenarnya kita masih menggunakan hari ini, adalah pilihan antara Apple dan Microsoft. Biasanya yang fonds adalah. Fonds adalah sebuah kontainer untuk gelif. Gelif seperti di setiap karakter individu. Fonds format menggantikan gelif. Jadi, apa yang fonds ini membuat fonds ini? Saya tidak rasa ada sesiapa yang membuat fonds di sini. Tapi, fonds format sebenarnya ada tabel yang memberikan informasi tentang gelif yang sepatutnya. Jadi, sebuah pindah yang sebenar adalah pengalaman besar di depan fonds bid-map yang terjadi. And both Microsoft and Apple went on to try to improve upon TrueType. So, Apple went off and made TrueType GX which was later renamed Apple Advanced Typography. So, that's the sort of iteration on TrueType. While Microsoft actually went to Adobe and then they worked together to come up with OpenType which is OTF format which is probably the format that is very widespread now. So, what these so-called new fonds format have is that they are able to contain a lot more glyphs than before. So, for those of you who are not Chinese, basically to have a Chinese fonds is actually very big because we have a lot of glyphs. So, the most basic simplified Chinese fonds would have about 20,000 glyphs. So, that's a lot. And the old formats couldn't contain that many. So, OTF and Apple Advanced AAT, they can. So, that's great. We also have EOT which actually stands for Embedded OpenType. Now, this was Microsoft's proprietary format that they wanted to propose for the web. But when they submitted this as a proposal to the W3C, it got rejected because proprietary. So, then we came up with a web open fond format. This was pretty good because I think it involved a lot of industry players. There's Microsoft, Mozilla and Opera. And this is the format that was accepted by the W3C as a web format. It's quite good in that it's really small in size. And W2 has, I think, 30% better compression than W2. So, that's why you have so many fond formats. History lesson. So, this is how a fond phase rule looks like. I think if you started a few years ago, you realised that you have a lot in your source. You have to declare everything. Nowadays, you can actually get away with just declaring W2 and W2 because if you can see the support for W2 is practically all green, Opera Mini generally just doesn't support web fond. So, pick a nice system fond. But other than that, actually, these two lines are enough. So, if you are tired of typing so many, just use these two. It's fine. I need speaker notes for this. Basically, this is supposed to explain how browsers pick fonts. Like, when you use the font family rule, you usually have something called font stack where you have like, I don't know, 5 or 6 fonts in the font family property. So, this font selection algorithm was in the spec in CSS 2.1, I would think. Over the last two decades, the algorithm has expanded but the general idea is just that your user agent is going to pick the first font on the list and it will sort of try to match criteria. So, in your font phase rule, you actually give each font, like for example font style, font weight, font etc. I'll cover later. So, there are some criteria. So, when you want to apply this certain font in this certain run of text, the browser will actually see if the font matches the criteria. For example, if it's a font style italic, you actually try to find a font that has this font style italic attached to it. So, if it doesn't find it, it will actually jump skip to the next font family. So, next and next and next. If it does find it, it will match and it will use that particular font to render your text. If it goes through every single font family and doesn't find anything, then it will fall back to the system font depending on your OS. So, that will be different. In the event that you actually end up, you have a character that cannot be rendered in any font. I think it's a famous or infamous Chinese character that has probably the most number of strokes. I think it's pronounced piang. It's like the name of a noodle. I have to ask why. I actually heard that it was a marketing gimmick by the guys who made the noodles. But you know, Chinese. Anyway, so I don't think there is a font that may or may not be this particular glyph in a font. So, outside, you will get something called... You'll get this blank square. I think this would be more familiar if you use Chinese software because when I was a kid, if I didn't install Chinese correctly on Windows, I would just get a row of rectangles like mahjong tiles and nothing. We call that tofu and that's why actually Google's font is called noto in a sense so Google has this font family that they want, what they're trying to do is they want to cover every single language in the world because Google can do this sort of thing. So they named it noto in a sense it's like no tofu. So that's how you come up with the name. Trivia. See, this is CSS font's trivia, guys. So this is like trivia night. So a tip for using if you're doing multi-lingual, you could be doing Chinese, you could be doing, I don't know, Arabic script, for example. Declare the Latin font first. Why? It's because if you're... It's almost a given for typeface designers in general who are doing non-Latin-based font, they will design the Latin-based character inside the font also. So if I'm using Wei Ran-Chen, hey tea, that's the Chinese font, there's going to be... the ABCs are going to be included in the font, but odds are it may not look very good. And also font rendering in Mac and Windows is different. So if you're... somehow the Latin characters in the Chinese font like Sim Sun, if you have tried it before, it doesn't look very good, especially on the older versions of Windows. So if you declare the quote-unquote nice Latin-based font, your Latin characters, your ABCs will render in the font of choice, and because those fonts probably don't have the Chinese characters, they will fall back down onto your Chinese font of choice. So always declare the Latin font first. Ya, just a tip. Also the specification says that the browser, the user agent has to recognise the font family names case insensitively. You never know what could go wrong, so just put the font names in quotes. Just in case. Be safe guys, be safe. So there's also this thing called generic font families. So like sometimes I'm lazy I don't want to design and look for font so I'll just like I'll case serif. It turns out if you... in your OS the HTML language of your your site or character set or your browser each of these generic font families will use a different font. So for example serif and sensory is not so fun. Let's go for cursive. So if you use cursive and let's say you are using Mac, you will get the Apple Chancery font but if you are using windows you get comic sense. If you use fantasy Gabriola I think shows up in windows 10. Impact shows up in older versions of windows. I can't pronounce the third one. Papyrus maybe that shows up in Mac. So I mean if you want to be interesting and just like everybody on a different OS will see a different font you can use cursive and fantasy why not. Fun. So CSS fonts now is on level 3. Level 4 is going to add 4 more generic font families. System UI if Sebastian Deckels were here he have something to say about system UI. Emoji apparently is going to be a generic font family which will be... I wonder what math is going to be because I haven't really read the spec yet but like what's the generic font family for math. And Fang Song is actually a Chinese font family how should I explain it. It's like the it's kind of like serif for Chinese fonts but a bit skewed. This doesn't make sense if you're not Chinese I'm just going to skew this. So they have like basic font properties I think everybody's familiar with the first four so you have font weight. Font weight is how the width of the glyphs the weight of the glyph sorry. So you can actually use from numbers from 100 to 900 lightest to heaviest. You can also use keywords like oh crap. No no no keywords. I don't have I had this in the speaker notes I don't have speaker notes in front of me but basically there are keywords you can use. Can't remember what those are sorry. Font stretch is so you can select whether your font phase is condensed or expanded. So all this actually apply into the your add font phase rule. Font style is for your italic or oblique. So italic is like properly designed italic font while oblique is just the regular phase that got like skewed to the side and normally if you work with like designers that are very particular they hate it when you do oblique they're like you're ruining my design what do you mean and then I get a lot I get earful from them. So if you have just use always include the actual italic font the oblique version actually really doesn't look very nice to be honest font size everybody knows so font size adjust is relatively new came about in level level 3 font level 3 so what it does is that remember earlier when I said font stack so if the font doesn't exist the browser will use the next one or the next one so those are like fallback fonts so sometimes original first choice so the x height of your fallback maybe little smaller than your original so what this property actually does is it's going to adjust the font size of your fallback font to match the x height of your first choice font so it kind of is a legibility fix font synthesis I kind of like because as I said your browser is actually it's a very well meaning piece of software in that if you did not install a heavier font or a proper italic version of the font you are using it will like you know to best effort you will try to like okay the developer wants this font to look bold but I don't have a bold font never mind I will try to synthesize it usually it doesn't come out right like if you have a again a designer who is very particular about it like this font looks terrible what you do to my font never mind so you can actually set this value to none and so that you like browser please don't geek yang don't change my font and it will just it will just not it will just use the original font so when you see bold it's not going to be bold so you are actually saying browser don't synthesize don't do any of those folk italic nonsense so these are the two properties so this is font phase how font phase rule works looks very complicated because usually we just use the we usually just touch on the blue once we don't really use the we use the first four but what I find useful is actually the unicode range property because this is text in Russian if anybody can read Russian I'll give you lots of chocolate but this is just a run of text oh you do come come can you tell everybody what this says but can you tell everybody what this says this is about short history of Tetris excellent so these these are not these are not Latin characters these are Cyrillic alphabets so it's not not every font has support for Cyrillic letters so like for this particular set of slides I'm using this font family called Magnetic Pro and it doesn't it doesn't have Cyrillic alphabets support so what I did was I found a font so I found a font that kind of is looks a bit similar in terms of look to it but it does support Cyrillic characters and it's called Bender so what I can do is that I can actually use the same name so normally when we declare font face it's like okay give the font family name and where you get the font from and you leave it at that what you can do is you can use the same same name but you can declare a different font and you use the unicode range to tell the browser that when you encounter characters that fall within this unicode range so this particular range is actually the range for Cyrillic alphabets use the use the font that use this Cyrillic font that I declare so how this works is that if let's say I'm on a website with multiple pages if my pages don't contain any Cyrillic letters this won't load because it's not needed but when it encounters any of the characters that fall within this unicode range then it will load this particular font so in a sense it's kind of like a performance thing as well because if the font is not needed you don't want to load it because even if I optimise and I subset my font the most basic just like basic Latin set will come in 50 kilobytes give or take so if you use it adds up if you use only one or two fonts because until variable font become a thing usually you're going to have the normal version the bold version and the italic version so that's like three then if you have a bunch of other language it adds up cumulatively so if you don't need it you don't want it to load so this is a good way to do things and okay there are also things like font feature properties which is allow you to use the open type features because we mentioned OTF earlier so these are the most common one so if you want to adjust the kerning font variant position you can turn on ligatures if you want to and all these are properties that you can control using CSS there is an older value that is font feature settings in that it gives you access to like the over hundreds of open type properties so this actually the most common ones that you can use and that's why it got spec in that you can like specify this as font feature properties when you when you are writing them in your CSS these are the most common ones what nobody actually talks about because I think nobody really cares about Chinese is that they these are these two font variant East Asian and font language overwrite are more for like internationalization purposes so variant East Asian applies for Han characters or even Japanese characters right if you're not familiar with Han characters there are actually differences if you are talking about Japanese Korean traditional Chinese and simplified Chinese so the same word can be written using different glyphs so this particular open open type property allows you to like toggle the so I think a more obvious one is the second one so this actually read as stash or university the first one is actually simplified so the traditional version or the Japanese version is a it's a bit different it's a bit more complicated but they actually read the same but you can toggle you can toggle these different glyphs on the audience of your of your site for example if you're in Taiwan you'd be using a traditional Chinese font if you're in mainland China or to some extent Singapore, Malaysia you'd be using simplified Chinese if you're in Japan you'd be using a Japanese font and and the glyphs are actually different university they use the simplified Japanese oh okay good to know language override actually more relevant example would be for languages that have like Turkish right because some ligatures they will have the f and the i f i is a ligature where they'll combine the f and the i into like one glyph but they are some languages in the world that they have a dotless i so you can't the ligature to turn on because then it will so ruin you're messing up the person's word so if what do you mean so the dotless i is not actually in the i correct so if you but sometimes if the font you're using doesn't doesn't recognize doesn't know that it doesn't support a particular language it might you'll still turn on the ligature anyway because it's assuming it's like a traditional latin like note with a dot again there was a language in my speaker notes I can't remember what it is but it's it has a dotless i so what you can do is no so they are Turkish fonts yes there's a lesser known there's a like those smaller languages that they don't have font specially for that particular language so if you set your HTML language to that particular language for example you would use font language override to force the browser to use the Turkish font instead this will make a lot more sense if I had my feature if my speaker notes in front of my face by don't so font feature settings is the is the one that is actually well very well supported across all browsers but it's not encouraged that you use this because it's it goes it allows you to really set go through each of the hundred open type properties all the way down to I don't know g-posts or like vertical positioning so I did the reason why the the font specification has the these earlier ones is that because these are the most common ones that everybody use so it's just trying to make people's lives easier so you don't have to memorise the specific code for each of the font feature settings so that's that yeah that's it that's all the CSS font trivia we have tonight if you have any questions about CSS fonts you can talk to me yeah so that's it that's it do we have announcements tonight can I just raise an issue with italic font oh sure yes I got caught with this one that I had specified italic and then my font family but the font the at font thing had also said italic so windows looked just fine on safari it was italic it was nearly lying on the ground so it was double italic and I did a reading about that and what it said was if you're going to use italic in your like I or em in your html then you should not use italic in font specification you're using the italic um family but you don't tell it to do italic because that will double it up that's an interesting one so I've been happily developing your windows and never saw her oh yeah I'll have a job windows font rendering is terrible um a lot of a lot of places I've seen declare their font faces incorrectly which probably caused it that was probably what was going on yeah so once I declared it the right way around then it would look fine on windows and you shouldn't be using font style italic if you're going to use italic font you should be just setting a font type into an italic font the thing I inherited before I knew I see a lot of people like defining their font faces and they'll put like different names or regular bold and italic or whatever and like essentially training them as different fonts and when you should really be naming them the same font and specifying that this one is like this font weight and this one is this font style and then in your CSS you can just treat it as regular um like you would normally and it'll render it properly and they're all actually the same font family ah yeah here we go so what he's saying is that some people because you would have your regular font, your bold font and your italic font so some people will name it because the font family property when you're in the font face rule it's actually a label so you could name it like bananas you could use the font Helvetica and name it bananas and use bananas in your CSS and like sort of screw your team don't do that so so what what he's saying is that some people will do okay Helvetica bold Helvetica italic Helvetica regular but what you should be doing is naming all of them Helvetica and then using the font style uh property property label for each of the the different font files that you are declaring that's like the quote unquote correct way of doing it so yes please what I was given was a thing here it was called something something italic ah okay okay and then I specified italic here and I had italic in the HTML so it was world world italic on the ground so it's italic cube so I think I don't know what I had to get but I think probably this one and then everything was fine okay so if you don't want your italics to be squared and cubed then you know do it the right way if you don't care about any of that no what is that spell it smellvetica smellvetica smellvetica sounds mature sounds mature font for a more civilized time I see well um well that's something anyone got any announcements or anything it's the perfect font to do when we teach many times the cutting no my eyes save this for April 1st 2018 everybody I can think of a few designers I can install this okay announcement anybody hiring looking for a job have a