Continue css beauty font - the font on the page. Stronger weapons design. shrink Look pryklady1, pryklady2 and consider what percentage of site design take on fonts? As for the css, is a universal property allows you to specify several characteristics of a space. shrink Must be objective 2 DATA Specific font-size and font-family. Get acquainted with all features:
font-style - there is a regular, italic and slanted, it's simple. shrink For example ask Italic (italic) font <head> body {font-style: italic; } </ Head> <body> I am italic text! </ Body> font-weight - sets nasychynasts font. For example the value bold. <Head> .attention {font-weight: bold; } </ Head> <body> I love <span class = "attention"> CSS </ span> </ body> picked up on the most interesting font-family - the font family. Remember in the Word, we can choose Times New Roman or Calibri? This is it. For example put a typical Arial. <Head> shrink body {font-family: Arial; } </ Head> <body> I am from sans-serif family! </ Body> Also, the family can be listed, separated by commas. If your computers are not the first family will be found, then turn the other, etc. For example, now used font serif. <Head> body {font-family: notfoundfont, serif, shrink san-serif; } </ Head> <body> "notfoundfont" does not exist on computer, use next family - serif. </ Body> Family - it's actually the name of the font, that is what we will deliver a family and will look like our font. How do you do the taste? Where to get cool fonts? Free collection from google fonts will be mindful that there are Cyrillic fonts (letters of our alphabet) and Latin (the Latin alphabet). Choose a font Alef, which we liked, shook "add to collection" (add to the collection). Further pressed the collection, choose the tab "use" shrink and do 3, 4 step. We need to connect sgeneryravany css .He will download the font the user. Then simply shrink users need font-family body {font-family: 'Alef', serif} Cool! Take in albums lcd community vk.com/design.school. Here we do not generyyutse one css, we only download files from text. How can connect the font if we only have a file type? Look the same from Google sgeneryravany css font and make similar: @ font-face {font-family: 'Alef'; font-style: normal; font-weight: 400; src: local ('Alef Regular'), local ('Alef-Regular'), url (http://themes.googleusercontent.com/static/fonts/alef/v1/C8wmYJieZdfX3SNk-GwKVA.woff) format ('woff' shrink ); } What happened, gave the name of the family, put style and saturation, set the file path (src): first, trying to find the font installed on your computer, if your computer does not, then the path to an external url with the appropriate file format. After ordinary users font-family font-family: 'Alef'. The difference is that we have written css themselves with the appropriate name of the family and the path to the file. The third way is to take a look for the font from the site. For example you like the font on course.by. Just inspect the text and in the window Computed shrink Style" find the value of the font-family. Here 'Open shrink Sans'. shrink Learned the title on hammering in Google and look for the font itself (probably will be in Google fonts) or swing directly shrink from the site (url in the @ font-face). font-size - font size. Standard font size on the page 16px; Finally, we use the 2 necessary for the universal properties DATA Specific font. Make the size of 20px and family Arial; <Head> header {font: 20px Arial; } </ Head> <body> <header> I have 20px size. </ Header> I have default size 16 px; </ Body> Let me remind you that the property font children take in spadchynasts from their parents. Fonts can be measured in px,%, em, pt; Standard size 16px = 1em = 100% = 12pt Px - physical "point" display. shrink Pt - in favor of Publishing (1/72 inch), not on the web. Em - relative font, such as body size is 20px, and we header - 2em (40px), aside - 0.5em (10px). If we change the size of a body to 10px, then, accordingly, the size of header able to 20px and aside 5px. % - Same as em. The only difference shrink is that in fact the fonts are different sizes - if we climbed into the properties of the browser and reset the text-size of the medium on the other. Now the relative sizes (pt,%) extruded static (px), because it's adapted to the various shrink resolutions, such as smartphones and should reflect a smaller font than mac-monitors. More information shrink can be discussed in subsequent shrink sessions. Also fonts (no pictures) started to make icons, see the example font-awesome game with fonts often leads to the creation of logo color - sets the color of the text. <Head> p {color: grey; } </ Head> <body> <p> I am grey text! </ P> I am default coler text; </ Body> Homework: connect font with google web fonts. connect font http://vk.com/design.sc
No comments:
Post a Comment