Thumbnail

Thumbnail

More than usual

Less than usual

Italics

Italics

Underlined

Crossed out

Style Attribute Capabilities

In addition to the described tags, there are several more ways to change the font in html. One of them is the use of the generic style attribute. Using the values ​​of its properties, you can set the font display style:

1) font-family - property sets the font family. Enumeration of several values ​​is possible.
Changing the font in html to the next value will occur if the previous family is not installed on the user's operating system.

Writing syntax:

font-family: font name [, font name [, ...]]

2) font-size - the size is set from 1 to 7. This is one of the main ways in which you can increase the font in html.
Writing syntax:

font-size: absolute size | relative size | value | interest | inherit

The font size can also be set:

• In pixels;
• In absolute value ( xx-small, x-small, small, medium, large);
• In percents;
• In points (pt).

Font-size: 7

Font-size: 24px

Font-size: x-large

Font-size: 200%

Font-size: 24pt

font-style: normal | italic | oblique | inherit

Values:

• normal - normal spelling;
• italic - italic;
• oblique - right-tilted font;
• inherit - inherits the spelling of the parent element.

An example of how to change the font in html using this property:

font-style: inherit

font-style: italic

font-style: normal

font-style: oblique

font-variant: normal | small-caps | inherit

An example of how to change the font in html with this property:

font-variant: inherit

font-variant: normal

font-variant: small-caps

font-weight: bold | bolder | lighter | normal | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900

Values:

• bold - sets the html bold font;
• bolder - fatter relative to normal;
• lighter - less saturated relative to normal;
• normal - normal spelling;
• 100-900 - sets the font thickness in numeric equivalent.

font-weight: bold

font-weight: bolder

font-weight: lighter

font-weight: normal

font-weight: 900

font-weight: 100

The font property and html font color

Font is another container property. Internally, it has combined the values ​​of several properties designed to change fonts. The font syntax is:

font: font-size font-family | inherit

Also, the value can be set to the fonts used by the system in the inscriptions on various controls:

• caption - for buttons;
• icon - for icons;
• menu - menu;
• message-box - for dialog boxes;
• small-caption - for small controls
• status-bar - status bar font.

I learned a lot about this topic for myself. In particular, there are two ways to connect fonts, the peculiarity of working with Google service Fonts and the number scale of font density, resources for finding free fonts, the intricacies of working with the FontSquirrel generator, resources for font icons. The information turned out to be extremely useful and interesting for me.

Below is a brief summary of all the questions that seemed interesting and new to me in my practice, retold in my own words. I hope this material will be useful not only for me alone.

Connecting web fonts using @ font-face:

• connecting a custom font using a directive

Directive

There are several formats for web fonts. The most common ones are: EOT, WOFF, OTF or TTF,

EOT format, which IE browsers understand up to version 8. Actually, this font format was created and exists only for the sake of this browser and its versions. To get an EOT font, you need a special software to convert TTF to OET format.

WOFF format(Web Open Font Format) is the best for use on the Web today: smallest and lightest, supported by all modern browsers (including IE9 and above); this format was created specifically for the web. In fact, it is a lightweight version of the TTF or OTF format.

OTF formats(Open Type Font) and TTF (True Type Font) are the most common computer fonts used by most operating systems(Windows, Macintosh, Linux) and in applications for these systems. But besides that, such fonts can be easily used on the Internet.

SVG format- it's not even a font format, but a graphics format, a graphic image. A feature of this format is that graphics in this format are created exclusively using vectors, that is, mathematical formulas.

Thanks to this, images in this format are scaled without loss of quality - when increasing the size of the picture, the computer only needs to recalculate the vector points. The peculiarity of this graphics format made it possible to use it to create “fonts”. That is, a regular font is converted to SVG format, where each font is actually a picture in scalable SVG format.

Why were such difficulties required? The thing is that browsers for Android OS (a very common OS for mobile devices) can only display web fonts in this format. IPhone browsers (Safari 4.1 and below) also cannot recognize web fonts. It is to these “clumsy people” that they slip pictures in the form of fonts - “you don’t know how to eat ordinary food, so eat at least this!”.

Legal issue of using fonts

The question can be summarized in the next two sentences. All fonts are divided into paid or free.

Paid fonts are divided into those that:

• can use on the web
• it is impossible use on the web

In order not to bother with the solution of the confusing issue of the license for fonts, you can use the web services Google fonts or TypeKit, which contains all the fonts, which can be used on the web... The fonts on these servers are either free (Google fonts), or paid(TypeKit).

Short list free font sources that can be used on the web:

https://www.theleagueofmoveabletype.com/)
• FontSquirrel (http://www.fontsquirrel.com/)
• Google Fonts ( https://www.google.com/fonts)
• The Open Font Library (http://openfontlibrary.org/ru)
• Fontex.org (http://fontex.org/)
• Exljbris Font Foundry (http://www.exljbris.com/)

Most web services that provide fonts for the Web “serve up” them in OTF or TTF format. Therefore, you need to convert this font into the four formats described above, so that the maximum number of site visitors can see the content of this site on their devices. There is no need to search for special software to convert. You can use the free @ font-face Generator available on FontSquirrel (http://www.fontsquirrel.com/).

The only limitation of this service is that it has its own blacklist, which contains fonts that are prohibited under license for use on the Web. In other words, if you “slip” a licensed font acquired by a pirate method into this generator, it will refuse to generate the latter.

Generator

• EOT- format only for Internet Explorer 8 and below
• WOFF- the most modern and smallest font that most modern browsers understand
• TTF- relatively large font and rather outdated
• SVG- the largest font in size and volume, so it must be placed on the very last line. In addition, this font format is only used by Android OS browsers or Safari 4 ( that is, iPhone)

The browser reads the body of the directive

Correct application of the connected League Gothic web font. Here the name of the connected font is indicated in the first place, and then - fallback fonts that are known to be installed on the user's system(the name of the font guaranteed to be on the system and the font family).

The attentive reader will pay attention to the second line and say: this is superfluous here, some kind of nonsense. In fact, this is not entirely true. Browsers always try to render headings in bold, by default. Therefore, here we are telling the browser not to just do this, and that's it.

Besides letters, fonts can consist of icons or images. Resources for the topic of font icons and icons:

Types of fonts

When connecting the fonts installed on the computer, usually there are no questions and we do not think about how it turns out that when the browser is instructed to render the text in bold using the tag

In fact, this is not the case. Or not quite so. The browser actually renders the font in the way it is specified, but it cannot do anything with the font itself. It just takes the typeface specified by the tag and displays it on the screen. The point is that designers or font companies create fonts this way: an artist draws four sets of the same font. That is, it draws a set of characters in regular style, then draws a set of characters in italic style, then a set of characters in bold style (bold), and finally a set of characters in bold italic style (bold italic). All four of these character sets are actually separate fonts, although they share one common name (Georgia, Tahoma, Helvetica, and so on).

When the browser is told which face to apply, it simply takes the font with the specified face and displays it. For example, the Arial font has four weights. If bold is specified, the browser uses Arial bold. The browser itself cannot convert one style to another in any way. He can do only one thing - try to make the regular italic style. The command that tells the browser to perform such a task is called

An easy way to connect a web font

A simple way is to add to the directive

I'll tell you how I understand these CSS rules. Directive

• - load the font of the specified weight;
• produced each time by a separate function call to the selected page elements: p (font-family: PTSans;)

  And then with HTML tags

  specify which font style to apply to the specified elements: dolor ets< strong >lorem ipsum dolor etslorem ipsum ipsum dolor ets lorem ipsum< em >dolor ets lorem ipsum dolorets lorem ipsum dolor ets

  The browser will "pull" the font of the desired style (bold or italic or bold italic) from the PTSans array and apply it to the specified page elements.

  The advantage this method connecting a web font is its versatility. It is enough to declare the font once using the directive

  and.

  Where tags are applied

  , IE8 will render the PTSans font itself. An example of an IE8-friendly web font connection is shown below: @ font-face (font-family: "PTSansRegular"; src: url ("PTSansRegular.eot"); src: url ("PTSansRegular.eot # iefix") format ("embedded-opentype"), url ("PTSansRegular.woff") format ("woff"), url ("PTSansRegular.ttf") format ("truetype"), url ("PTSansRegular.svg") format (" svg "); ) @ font-face (font-family: "PTSansItalic"; src: url ("PTSansItalic.eot"); src: url ("PTSansItalic.eot # iefix") format ("embedded-opentype"), url ("PTSansItalic .woff ") format (" woff "), url (" PTSansItalic.ttf ") format (" truetype "), url (" PTSansItalic.svg ") format (" svg ");) @ font-face (font-family : "PTSansBold"; src: url ("PTSansBold.eot"); src: url ("PTSansBold.eot # iefix") format ("embedded-opentype"), url ("PTSansBold.woff") format ("woff" ), url ("PTSansBold.ttf") format ("truetype"), url ("PTSansBold.svg") format ("svg");) @ font-face (font-family: "PTSansBoldItalic"; src: url ( "PTSansBoldItalic.eot"); src: url ("PTSansBoldItalic.eot # iefix") format ("embedded-opentype"), url ("PTSansBoldItalic.woof") format ("woff"), url ("PTSansBoldItalic.ttf") format ("truetype"), url ("PTSansBoldItalic.svg") format (" svg "); )

  Note the lack of rules

  and,? How bloated the stylesheets are in this case! And what if suddenly (God forbid!) You have to make changes to such a code? p (font-family: PTSansRegular; font-weight: normal; font-italic: normal; font-size: 36px;) p strong (font-family: PTSansBold; font-weight: bold; font-italic: normal;) p em (font-family: PTSansItalic; font-weight: normal; font-italic: italic;) p strong em (font-family: PTSansBoldItalic; font-weight: bold; font-italic: italic;)

  Whether or not to use the second method of including web fonts is a matter of how much IE8 support is needed for a particular site. It should be noted that the share of IE8 is falling and will continue to decline.

  Google fonts

  In order not to bother with finding a font, downloading it in TTF or OTF format, converting on a generator such as FontSquirrel Generator, connecting the resulting CSS styles to the project using numerous directives

  , the second one is more laconic with the help of a directive - it is enough to include it at the beginning of the style sheets so that the selected fonts are applied to all HTML pages.

  Third way with JavaScript, besides complexity, it has no other advantages over the other two.

  On Google, font density is not indicated by keywords

  , and in the numerical scale - 100 to 900. A value of 400 corresponds to the Gentium Book Basic font of normal italic weight: em (font-family: "Gentium Book Basic", serif; font-weight: 400; font-style: italic;)

  This concludes the squeeze on web fonts.

Haven't written anything for a long time, but oh well.
IN this moment I am engaged in web development and the question arose about a beautiful menu. With animation, but no JS or Flash. Of course, this is all done with CSS3, and we won't be using images to boot. Absolutely.

We start, we see the window

Open "Text> SVG Font Editor ...", a panel will appear on the right

Click on font 1, change it to the name of your font, for example MySomeFont, to the right of the * Typeface * field, clear.

Now open the tab * Glyphs * everything on our panel * SVG Font Editor *. As we can see, the glyphs of the English layout have already been added for us. You can delete everything if they interfere by right-clicking on them. You can also edit the name of the glyph and the symbol that it identifies

Let's add the pictures themselves.

Import "File> Import ..." (Ctrl + I) the image that we want to include in the font. If it is a raster goggle, after adding it you need to perform "Path> Vectorize Raster" (Alt + Shift + B). Personally, I didn't poke around in the options, just click on * OK * and a vector image is already created.

Delete the raster (Select and press the Delete key) - at the bottom of the line, when selecting an object, it is written whether it is raster (Image) or vector (Contour).

Next, we stretch the contour onto the work area (in the upper panel there are input areas - x: 0, y: 0; W: 1000 and H: 1000). Leaving the outline selected, follow our favorite panel * SVG Font Editor * to the * Glyphs * tab. Now select the glyph that we want to associate with our path. Let it be a glyph with the * a * character. Then just click on the button * Get curves from selection *. To check if we did everything right, just enter the added character into the * Text * field below and our image should be displayed. After checking, the contour can be moved off the work area or deleted, it is no longer needed.

We can also associate all unused characters in the font with any outline through * Take from selection * with text * Missing glyph * in the * Glyphs * tab. The operation proceeds as described above.

In general, we added all the outlines to our symbols. Now you need to edit the XML file itself a little. Open * XML Editor * (Shift + Ctrl + X) - there is a button on the main panel - the fourth from the right. And we need to change the * id * attribute of the item *

@ font-face (
font-family: "MySomeFont";
src: url ("fonts / font.svg") format ("svg");
}

Well, in general, that's all.

There are many ways to find the right font for your website. For example, you can use services with huge font libraries that require a paid subscription.

If your budget is tight or you're experimenting with a small project, you can use the free, freely available web fonts. Finding the right web font for your website can be time-consuming, so here's a selection of the best among them.

1. Montserrat

As typography has evolved, typography is moving away from vintage urban posters and signs. The creator of this font tried to preserve the beauty of the typography of urban posters she saw on the streets of Buenos Aires.

2. Abril fatface

Abril Fatface is part of a wider font family with 18 styles designed for a variety of purposes. This font has a strong, elegant presence, making it the perfect choice for eye-catching headlines. Most often it is combined with Lato, Open Sans and Droid Sans.

3. Playfair Display

Given its significant x-heights and small descenders, Playfair Display is also suitable for writing a title, especially if space is limited. It pairs well with Georgia and is often used with Oswald, Lato and Arvo.

4. GT Walsheim

Used in many blogs today, GT Walsheim is a geometric sans serif and is part of the Grilli Type family. You have to pay for the full set of fonts, but Grilli Type offers a free trial of GT Walsheim.

5. Merriweather

If on-screen readability is a priority for your project, use the Merriweather that was created for this purpose. In addition, this font is constantly being improved.

6. Josefin sans

Josefin Sans was created according to the canons of vintage Swedish design and has an elegant geometric aesthetic.

7. Gravitas one

Gravitas One is based on “UK fat face”, a bold ad font that emerged during the Industrial Revolution in England. This font looks great on medium to large scales and is suitable for headings, titles, and tabs.

8. Jura

The letters of this font repeat the forms of Kaya-li's writing. It also contains Cyrillic and Greek glyphs. It is available in light, normal, medium and bold weights.

9. League Gothic

Originally designed by Morris Fuller Benton for the American Type Founders Company in 1903, League Gothic has found new uses after updating and adding new glyphs.

10. Fjord

Fjord is a serif typeface originally created for print books and is especially suited for placing long text in a small print format. It can be used to create a large amount of text content on the site, as the font has a clear structure, prominent serifs, and long elegant tops and descenders.

11. Amaranth

The Amaranth font family features a non-slanted italic design with little contrast and noticeable curvature. All three Amaranth styles go well with just about any other font. You can play with this font - experiment and choose the best.

12. Poly

This medium contrast typeface was originally created for the native Wayuunaiki language, which requires wide glyphs. It features small outriggers and large x-heights, making it particularly useful in small sizes.

13. Gentium Basic

This font was designed as a multi-linguistic font that includes Latin and Greek letters, as well as Cyrillic and advanced support in the Gentium Plus version. Gentium Basic and Gentium Book Basic are available as a free web version, but are limited to the Latin alphabet only.

14. Open sans

Open Sans is a representative of the humanistic grotesque. This font is highly legible and has been adapted for both web and mobile interfaces. It is a non-slanted typeface with a simple typeface that has a neutral but pleasant enough look to be used for a variety of purposes.

15. Ledger Regular

It is a multifunctional typeface with large x-height, strong color contrast, and well-defined serifs that contribute to the readability of the text. This font looks good both in print and on a low-resolution screen.

16. Signika

This free web font is a sans serif. Low contrast and high x-height allow Signika to display well on screen. The wide range of icons includes symbols, pictograms and arrows.

17. Josefin slab

Created according to the canons of the geometric font characteristic of the 30s of the last century, with the addition of Scandinavian features, the Josefin Slab typeface has the characteristics of a slab type and resembles a typewriter. Interestingly, its x-height is half the height of the capital letter.

18. Forum

As the name suggests, this is a Roman font, which is good for caps lock headings, but also works well for displaying text. The elegant proportions of this font are reminiscent of classical architecture with its semicircular arches, horizontal cornices and vertical columns.

Named after one of the most famous Mayan cities, Tikal Sans possesses the glyph traits that were used in the writing of South American civilization. Its creator chose a large x-height to give the font a modern look and a beneficial effect on legibility, and a wide variety of typefaces allows it to be used for a variety of purposes.

20. Arvo

Suitable for print and web alike, this geometric slab font is available in Roman, Italic, Roman Bold and Bold Italic. Arvo's low contrast improves readability on screen.

21. Bevan

Bevan was inspired by the traditional slab typeface of the 30s. The letters have been digitized, reshaped and optimized for the web. This is one of the few super bold fonts that are suitable for websites.

22. Old Standard TT

Old Standard TT was inspired by the modern serif font, which was popular in the late 19th and early 20th centuries and then forgotten for a long time. This font is suitable for giving style to a particular kind of content, such as scientific research or texts in Greek or Cyrillic.

23. Kreon

Ideal for news websites and blogs, this serif also has slab features, but its balance and low contrast make Kreon significantly more personalized.

24. Droid sans

Droid Sans has been optimized for maximum readability even in small interfaces - for example, menus on mobile phone screens. It is a neutral, non-oblique typeface with simple open lettering.

25. Italiana

The creator of this font was inspired by classic Italian calligraphy, so the font will be very useful for projects where you need to add elegance. Italiana is also suitable for writing news headlines in both print and electronic form.

26. Vollkorn

This highly detailed, multi-functional serif font is very popular. Its clarity and solidity expresses confidence and energy, making it equally effective at large sizes for headings and titles, as well as significant amounts of text in smaller formats.

27. Actor

This font has a particularly large x-height, which requires a lot of space. Actor also has an old-fashioned style of some characters, such as the numbers 6 and 9.

With its roots in the 16th century, the humanistic Garamond font has become a true typographic icon, which has served as the basis for many modern typefaces, including EB Garamond.

31. Ubuntu

Grotesque Ubuntu was created to personalize web text on both desktops and mobile devices. Users are encouraged to experiment with this font, modify and improve it as they see fit.

32. Rosario

Rosario is a classic humanistic sans serif, perfect for styling paragraphs of text.

33. Roboto slab

Roboto Slab is one of the Roboto fonts. The slab version is particularly eye-catching with its geometric shapes and open curves. It works equally well for gadget screens and printed versions of texts.

34. Oswald

The font is a reworked version of the classic Alternate Gothic sans serif. Oswald was recently updated to offer a variety of weights, extended character sets, and better kerning.

35. Stalemate

Stalemate is a sleek handwritten typeface with some vintage feel. It is suitable for creating accents and personalizing your website.

36. Crimson Text

This carefully designed classic proportional font can be used for both displaying large amounts of text and writing headings.