- font-family
- Поддержка браузерами
- Описание
- Font Family Class
- Definition
- Remarks
- Specifying Fonts in Alternate Directories
- Font Fallback
- Defining a Font Fallback Sequence in Code
- Composite Fonts
- XAML Attribute Usage
- XAML Values
- Constructors
- Properties
- Methods
- Windows 10 font list
- Introduction
- Fonts included in Feature On Demand (FOD) packages
font-family
Поддержка браузерами
Описание
CSS свойство font-family позволяет указать шрифт текста, который будет использован внутри элемента. Существует два способа указать шрифт для использования:
- family-name (имя шрифта) — название определённого шрифта из какого-нибудь семейства шрифтов, например: times , courier , arial , и т.д. Если название шрифта содержит пробелы, оно должно быть заключено в одиночные или двойные кавычки, например: «Times New Roman» .
- generic-family (семейство шрифтов) — набор шрифтов, обладающих общими характеристиками. Следующие семейства шрифтов по умолчанию доступны в любой операционной системе: serif , sans-serif , cursive , fantasy , monospace .
Описание стандартных семейств шрифтов:
- serif — шрифты с засечками
- sans-serif — шрифты без засечек
- cursive — представляют собой шрифты с большим количеством плавных красивых элементов оформления и всевозможных завитушек — это попытка повторить на компьютере рукописный текст
- fantasy — художественные и декоративные шрифты
- monospace — моноширинные шрифты, все символы которых имеют одинаковую фиксированную ширину
На разных компьютерах установлены различные операционные системы и каждая из них имеет свой собственный стандартный набор шрифтов, а также те шрифты, которые установил сам пользователь. Сам браузер не имеет никаких встроенных шрифтов, для отображения текста на веб-странице он использует те шрифты, которые установлены в операционной системе на компьютере пользователя. Таким образом при выборе шрифта на странице или на сайте в целом стоит учитывать тот факт, что набор шрифтов на вашем компьютере может сильно отличаться от набора шрифтов, имеющихся в наличии на компьютерах у других пользователей.
Чтобы решить проблему выбора используемого шрифта, свойство font-family позволяет в качестве значения указать не один шрифт, а целый список предпочтительных шрифтов, в этом случае их названия должны разделяться запятыми. Когда вы указываете более одного шрифта, всегда начинайте именно с того шрифта, который вы хотите использовать, и заканчивайте список указанием семейства шрифтов, чтобы браузер мог выбрать подходящий шрифт в семействе, если другие шрифты не доступны.
Когда браузер встречает первый указанный шрифт, он проверяет, установлен ли он на компьютере пользователя, и, если да, то использует его в качестве шрифта для элемента. Если шрифт не установлен, то проверяется второй шрифт и т.д. Если ни один из предпочитаемых шрифтов не найден, браузер выберет подходящий шрифт самостоятельно из указанного семейства шрифтов. Если указанные шрифты отсутствуют на компьютере пользователя, а общее семейство шрифтов не указано, браузер будет использовать шрифт, установленный по умолчанию в операционной системе.
Чаще всего при указании свойства font-family , используют «безопасные» (стандартные) Web-шрифты.
Чтобы на сайте отображался выбранный вами нестандартный шрифт для текста, который с высокой вероятностью будет отсутствовать у большинства пользователей, нужно совместно со свойством font-family использовать правило @font-face.
Font Family Class
Definition
Represents a family of related fonts.
Remarks
A font family is a set of typefaces that share the same family name, such as «Times New Roman», but that differ in features. These feature differences include Style, such as italic, and Weight, such as bold.
Example of typefaces that are members of the «Times New Roman» font family
Most user interface (UI) elements, such as Button and TextBlock, provide a FontFamily property that can be used to specify a font for the text content of a control. You define the font by setting that property with a FontFamily value. The following examples show how to reference a font, in Extensible Application Markup Language (XAML) and in code.
In the preceding example, the font that is referenced, «Comic Sans MS», is referred to by its friendly name. Also, in this example the font is assumed to be in the system font collection.
Specifying Fonts in Alternate Directories
A Windows Presentation Foundation (WPF) application can specify a directory, other than the directory that contains the systems font collection, for resolving font references. The friendly name of the font can specify an absolute uniform resource identifier (URI) value to resolve the font reference, as shown in the following Extensible Application Markup Language (XAML) and code examples.
The friendly name of the font can also specify a relative URI value, which requires a base URI to resolve the font reference. The BaseUri property of the FontFamily object corresponds to the base URI value. The following code example shows how to create a font reference that is composed of a base URI value and a relative URI value.
You can use a base URI value when you reference a font that is packaged as part of the application. For example, the base URI value can be a «pack://application» URI, which lets you reference fonts that are packaged as application resources. The following code example shows a font reference that is composed of a base URI value and a relative URI value.
When a FontFamily is specified as an attribute in markup, the base URI value is always implied — its value is the URI of the XAML page. The implied base URI value is used with the relative URI value in the friendly name string to obtain the location of the font. In the following Extensible Application Markup Language (XAML) example, notice that the relative URI value uses the «./» notation, which means «in the current folder» of the base URI value.
A WPF application can package fonts as either a content item, a resource item, or a library resource item. For more information, see Packaging Fonts with Applications.
Font Fallback
Font fallback refers to the automatic substitution of a font other than the font that is selected by the client application. There are two primary reasons why font fallback is invoked:
The font that is specified by the client application does not exist on the system.
The font that is specified by the client application does not contain the glyphs that are required to render text.
InWPF, the font fallback mechanism uses the default fallback font family, «Global User Interface», as the substitute font. This font is defined as a composite font, whose file name is «GlobalUserInterface.CompositeFont». For more information about composite fonts, see the Composite Fonts section in this topic.
The WPF font fallback mechanism replaces previous Win32 font substitution technologies.
Defining a Font Fallback Sequence in Code
You can define a font fallback sequence in your code, which lets you define an alternate font. When you create a FontFamily object, provide multiple font family names, separated by commas, for the String parameter, such as «Comic Sans MS, Verdana». In this case, if the glyphs from the «Comic Sans MS» typeface are not available, glyphs from the «Verdana» typeface are used. If neither «Comic Sans MS» nor «Verdana» have the required glyphs, the fallback font family of the typeface is used, which is «Global User Interface» by default.
The following examples show how to define a font fallback sequence, in Extensible Application Markup Language (XAML) and in code.
Any one of the fonts in the fallback sequence can specify font locations. In the following examples, «Pericles Light» is referenced as an application resource, and «Verdana» is referenced as a system font collection member.
Composite Fonts
The WPF platform provides a composite font feature to allow the construction of full range multilingual fonts, and to avoid displaying missing glyphs. Composite fonts replace the Win32 font linking, font fallback, font binding, font association, and end-user-defined characters (EUDC) mechanisms.
A composite font family is available to applications through the FontFamily and Typeface constructors just like any other font family. Each composite font family is named, and, as with other fonts, can provide localized variants of its name in multiple languages.
The following markup example shows how a composite font family can be defined as a disk file. This file can be stored in the default Windows font directory as with any other installed font, or can be referenced in any location by including its URI when referencing the family by name.
The following example shows the font family markup in a «.CompositeFont» file.
The following four composite fonts appear in the default Windows font directory as part of the WPF installation.
| Font | Notes |
|---|---|
| GlobalMonospace.CompositeFont | Renders text by using a monospace font, for example, «Courier New» for Latin characters. |
| GlobalSanSerif.CompositeFont | Renders text by using a sans serif font, for example, «Arial» for Latin characters. |
| GlobalSerif.CompositeFont | Renders text by using a serif font, for example, «Times New Roman» for Latin characters. |
| GlobalUserInterface.CompositeFont | Renders text by using a default font, for example, «Times New Roman» for Latin characters. |
XAML Attribute Usage
XAML Values
fontFamilyName
A string specifying a font family name. For example, «Arial» or «Century Gothic» .
fontFamilyNamesList
A string specifying multiple font family names, each separated by a comma (any white space following a comma is ignored). The first font family specified serves as the primary font family; subsequent font families serve as fallback families to be used in cases where the primary font family is unavailable or not applicable. For example, «Arial, Century Gothic» specifies Arial as the primary font family, with Century Gothic as the fallback font family.
fontFamilyFolderReference
A string specifying a folder containing the font, along with a font family name. The folder and font family name are delimited by a # character. The folder reference may be absolute, or relative. For example, «Custom Fonts\#My Custom Font» .
fontFamilyUriReference
A string specifying a uniform resource identifier (URI) for the font, along with a font family name. The URI and font family name are delimited by a # character. For example, «http://MyFontServer/Fonts/#My Custom Font» .
Constructors
Initializes a new instance of an anonymous FontFamily class.
Initializes a new instance of the FontFamily class from the specified font family name.
Initializes a new instance of the FontFamily class from the specified font family name and an optional base uniform resource identifier (URI) value.
Properties
Gets or sets the distance between the baseline and the character cell top.
Gets the base uniform resource identifier (URI) that is used to resolve a font family name.
Gets the collection of FontFamilyMap objects.
Gets a collection of strings and CultureInfo values that represent the font family names of the FontFamily object.
Gets a collection of typefaces for the FontFamily object.
Gets or sets the line spacing value for the FontFamily object. The line spacing is the recommended baseline-to-baseline distance for the text in this font relative to the em size.
Gets the font family name that is used to construct the FontFamily object.
Methods
Gets a value that indicates whether the current font family object and the specified font family object are the same.
Serves as a hash function for FontFamily. It is suitable for use in hashing algorithms and data structures such as a hash table.
Gets the Type of the current instance.
(Inherited from Object)
Returns a collection of Typeface objects that represent the type faces in the default system font location.
Creates a shallow copy of the current Object.
Windows 10 font list
Introduction
An important development in Windows 10 is the Universal Windows Platform (UWP): a converged app platform allowing a developer to create a single app that can run on all Windows devices. Windows fonts are one aspect of this convergence: Windows 10 introduces a recommended UWP font set that is common across all editions that support UWP, including Desktop, Server, and Xbox.
A number of additional fonts are available for Desktop and Server, including all other fonts from previous releases. However, not all of these are pre-installed by default in all images. In order to make disk usage and font choices more relevant to users according to the languages that they use, a number of fonts have been moved into optional, on-demand packages. These packages are designed around the different scripts that fonts are primarily intended to support, and most are installed automatically by Windows Update when the associated languages are enabled in language settings (for example, by enabling a keyboard). Any of these Feature On Demand (FOD) packages can also be installed manually via Settings. To add font packages manually, select the Start button, and then select Settings > Apps > Apps & features > Manage optional features.
The following is a list of desktop font sets that are present in the most updated version (2004, May 2020 release) of Windows 10.
Below you will also find list of fonts in each of the Feature On Demand (FOD) packages.
Please note: Not all of the Desktop fonts will be in non-desktop editions of Windows 10 such as Xbox, HoloLens, Surface Hub, etc.
| Family | Font Name | File Name | Version |
|---|---|---|---|
| Arial | Arial | Arial.ttf | 7.00 |
| Arial Italic | Ariali.ttf | 7.00 | |
| Arial Bold | Arialbd.ttf | 7.00 | |
| Arial Bold Italic | Arialbi.ttf | 7.00 | |
| Arial Black | Arial Black | Ariblk.ttf | 5.23 |
| Bahnschrift | Bahnschrift * | Bahnschrift.ttf | 2.06 |
| Calibri | Calibri Light | Calibril.ttf | 6.23 |
| Calibri Light Italic | Calibrili.ttf | 6.23 | |
| Calibri | Calibri.ttf | 6.23 | |
| Calibri Italic | Calibrii.ttf | 6.23 | |
| Calibri Bold | Calibrib.ttf | 6.23 | |
| Calibri Bold Italic | Calibriz.ttf | 6.23 | |
| Cambria | Cambria | Cambria.ttc | 6.99 |
| Cambria Italic | Cambriai.ttf | 6.98 | |
| Cambria Bold | Cambriab.ttf | 6.98 | |
| Cambria Bold Italic | Cambriaz.ttf | 6.98 | |
| Cambria Math | Cambria Math | Cambria.ttc | 6.99 |
| Candara | Candara Light * | Candaral.ttf | 5.63 |
| Candara Light Italic * | Candarali.ttf | 5.63 | |
| Candara | Candara.ttf | 5.62 | |
| Candara Italic | Candarai.ttf | 5.62 | |
| Candara Bold | Candarab.ttf | 5.62 | |
| Candara Bold Italic | Candaraz.ttf | 5.62 | |
| Comic Sans MS | Comic Sans MS | Comic.ttf | 5.14 |
| Comic Sans MS Italic | Comici.ttf | 5.14 | |
| Comic Sans MS Bold | Comicbd.ttf | 5.14 | |
| Comic Sans MS Bold Italic | Comicz.ttf | 5.14 | |
| Consolas | Consolas | Consola.ttf | 7.00 |
| Consolas Italic | Consolai.ttf | 7.00 | |
| Consolas Bold | Consolab.ttf | 7.00 | |
| Consolas Bold Italic | Consolaz.ttf | 7.00 | |
| Constantia | Constantia | Constan.ttf | 5.93 |
| Constantia Italic | Constani.ttf | 5.93 | |
| Constantia Bold | Constanb.ttf | 5.93 | |
| Constantia Bold Italic | Constanz.ttf | 5.93 | |
| Corbel | Corbel Light * | Corbell.ttf | 6.01 |
| Corbel Light Italic * | Corbelli.ttf | 6.01 | |
| Corbel | Corbel.ttf | 6.01 | |
| Corbel Italic | Corbeli.ttf | 6.01 | |
| Corbel Bold | Corbelb.ttf | 6.01 | |
| Corbel Bold Italic | Corbelz.ttf | 6.01 | |
| Courier New | Courier New | Cour.ttf | 6.92 |
| Courier New Italic | Couri.ttf | 6.91 | |
| Courier New Bold | Courbd.ttf | 6.92 | |
| Courier New Bold Italic | Courbi.ttf | 6.91 | |
| Ebrima | Ebrima | Ebrima.ttf | 5.14 |
| Ebrima Bold | Ebrimabd.ttf | 5.14 | |
| Franklin Gothic Medium | Franklin Gothic Medium | Framd.ttf | 5.02 |
| Franklin Gothic Medium Italic | Framdit.ttf | 5.01 | |
| Gabriola | Gabriola | Gabriola.ttf | 5.93 |
| Gadugi | Gadugi | Gadugi.ttf | 1.12 |
| Gadugi Bold | Gadugib.ttf | 1.12 | |
| Georgia | Georgia | Georgia.ttf | 5.59 |
| Georgia Italic | Georgiai.ttf | 5.59 | |
| Georgia Bold | Georgiab.ttf | 5.59 | |
| Georgia Bold Italic | Georgiaz.ttf | 5.59 | |
| HoloLens MDL2 Assets | HoloLens MDL2 Assets * | Holomdl2.ttf | 2.02 |
| Impact | Impact | Impact.ttf | 5.11 |
| Ink Free | Ink Free * | Inkfree.ttf | 1.00 |
| Javanese Text | Javanese Text | Javatext.ttf | 1.10 |
| Leelawadee UI | Leelawadee UI | Leelawui.ttf | 5.05 |
| Leelawadee UI Semilight | Leeluisl.ttf | 5.05 | |
| Leelawadee UI Bold | Leelauib.ttf | 5.05 | |
| Lucida Console | Lucida Console | Lucon.ttf | 5.01 |
| Lucida Sans Unicode | Lucida Sans Unicode | L_10646.ttf | 5.01 |
| Malgun Gothic | Malgun Gothic | Malgun.ttf | 6.68 |
| Malgun Gothic Bold | Malgunbd.ttf | 6.68 | |
| Malgun Gothic Semilight * | Malgunsl.ttf | 6.68 | |
| Marlett | Marlett | Marlett.ttf | 5.01 |
| Microsoft Himalaya | Microsoft Himalaya | Himalaya.ttf | 5.23 |
| Microsoft JhengHei | Microsoft JhengHei Light | Msjhl.ttc | 6.14 |
| Microsoft JhengHei | Msjh.ttc | 6.14 | |
| Microsoft JhengHei Bold | MSJHBD.ttc | 6.13 | |
| Microsoft JhengHei UI Light | Msjhl.ttc | 6.14 | |
| Microsoft JhengHei UI | Msjh.ttc | 6.14 | |
| Microsoft JhengHei UI Bold | MSJHBD.ttc | 6.13 | |
| Microsoft New Tai Lue | Microsoft New Tai Lue | Ntailu.ttf | 5.99 |
| Microsoft New Tai Lue Bold | Ntailub.ttf | 5.99 | |
| Microsoft PhagsPa | Microsoft PhagsPa | Phagspa.ttf | 6.00 |
| Microsoft PhagsPa Bold | PhagsPaB.ttf | 6.00 | |
| Microsoft Sans Serif | Microsoft Sans Serif | Micross.ttf | 7.00 |
| Microsoft Tai Le | Microsoft Tai Le | Taile.ttf | 6.00 |
| Microsoft Tai Le Bold | TaiLeb.ttf | 6.00 | |
| Microsoft YaHei | Microsoft YaHei Light | Msyhl.ttc | 6.23 |
| Microsoft YaHei | Msyh.ttc | 6.25 | |
| Microsoft YaHei Bold | Msyhbd.ttc | 6.25 | |
| Microsoft YaHei UI Light | Msyhl.ttc | 6.23 | |
| Microsoft YaHei UI | Msyh.ttc | 6.25 | |
| Microsoft YaHei UI Bold | Msyhbd.ttc | 6.25 | |
| Microsoft Yi Baiti | Microsoft Yi Baiti | Msyi.ttf | 6.00 |
| MingLiU-ExtB | MingLiU-ExtB | Mingliub.ttc | 7.02 |
| PMingLiU-ExtB | Mingliub.ttc | 7.02 | |
| MingLiU_HKSCS-ExtB | Mingliub.ttc | 7.02 | |
| Mongolian Baiti | Mongolian Baiti | Monbaiti.ttf | 5.53 |
| MS Gothic | MS Gothic | Msgothic.ttc | 5.32 |
| MS PGothic | Msgothic.ttc | 5.32 | |
| MS UI Gothic | Msgothic.ttc | 5.32 | |
| MV Boli | MV Boli | Mvboli.ttf | 6.84 |
| Myanmar Text | Myanmar Text | Mmrtext.ttf | 1.18 |
| Myanmar Text Bold | Mmrtextb.ttf | 1.18 | |
| Nirmala UI | Nirmala UI Semilight | Nirmalas.ttf | 1.40 |
| Nirmala UI | Nirmala.ttf | 1.40 | |
| Nirmala UI Bold | Nirmalab.ttf | 1.40 | |
| Palatino Linotype | Palatino Linotype | Pala.ttf | 5.03 |
| Palatino Linotype Italic | Palai.ttf | 5.03 | |
| Palatino Linotype Bold | Palab.ttf | 5.03 | |
| Palatino Linotype Bold Italic | Palabi.ttf | 5.03 | |
| Segoe MDL2 Assets | Segoe MDL2 Assets * | Segmdl2.ttf | 1.82 |
| Segoe Print | Segoe Print | Segoepr.ttf | 5.04 |
| Segoe Print Bold | Segoeprb.ttf | 5.04 | |
| Segoe Script | Segoe Script | Segoesc.ttf | 5.02 |
| Segoe Script Bold | Segoescb.ttf | 5.02 | |
| Segoe UI | Segoe UI Light | Segoeuil.ttf | 5.62 |
| Segoe UI Light Italic | Seguili.ttf | 5.32 | |
| Segoe UI Semilight | Segoeuisl.ttf | 5.62 | |
| Segoe UI Semilight Italic | Seguisli.ttf | 5.32 | |
| Segoe UI | Segoeui.ttf | 5.62 | |
| Segoe UI Italic | Segoeuii.ttf | 5.32 | |
| Segoe UI Semibold | Seguisb.ttf | 5.62 | |
| Segoe UI Semibold Italic | Seguisbi.ttf | 5.32 | |
| Segoe UI Bold | Segoeuib.ttf | 5.62 | |
| Segoe UI Bold Italic | Segoeuiz.ttf | 5.32 | |
| Segoe UI Black | Seguibl.ttf | 2.02 | |
| Segoe UI Black Italic | Seguibli.ttf | 2.02 | |
| Segoe UI Historic | Segoe UI Historic * | Seguihis.ttf | 1.03 |
| Segoe UI Emoji | Segoe UI Emoji | Seguiemj.ttf | 1.29 |
| Segoe UI Symbol | Segoe UI Symbol | Seguisym.ttf | 6.23 |
| SimSun | SimSun | Simsun.ttc | 5.16 |
| NSimSun | Simsun.ttc | 5.16 | |
| SimSun-ExtB | Simsunb.ttf | 5.03 | |
| Sitka | Sitka Small | Sitka.ttc | 1.12 |
| Sitka Small Italic | SitkaI.ttc | 1.12 | |
| Sitka Small Bold | SitkaB.ttc | 1.12 | |
| Sitka Small Bold Italic | SitkaZ.ttc | 1.12 | |
| Sitka Text | Sitka.ttc | 1.12 | |
| Sitka Text Italic | SitkaI.ttc | 1.12 | |
| Sitka Text Bold | SitkaB.ttc | 1.12 | |
| Sitka Text Bold Italic | SitkaZ.ttc | 1.12 | |
| Sitka Subheading | Sitka.ttc | 1.12 | |
| Sitka Subheading Italic | SitkaI.ttc | 1.12 | |
| Sitka Subheading Bold | SitkaB.ttc | 1.12 | |
| Sitka Subheading Bold Italic | SitkaZ.ttc | 1.12 | |
| Sitka Heading | Sitka.ttc | 1.12 | |
| Sitka Heading Italic | SitkaI.ttc | 1.12 | |
| Sitka Heading Bold | SitkaB.ttc | 1.12 | |
| Sitka Heading Bold Italic | SitkaZ.ttc | 1.12 | |
| Sitka Display | Sitka.ttc | 1.12 | |
| Sitka Display Italic | SitkaI.ttc | 1.12 | |
| Sitka Display Bold | SitkaB.ttc | 1.12 | |
| Sitka Display Bold Italic | SitkaZ.ttc | 1.12 | |
| Sitka Banner | Sitka.ttc | 1.12 | |
| Sitka Banner Italic | SitkaI.ttc | 1.12 | |
| Sitka Banner Bold | SitkaB.ttc | 1.12 | |
| Sitka Banner Bold Italic | SitkaZ.ttc | 1.12 | |
| Sylfaen | Sylfaen | Sylfaen.ttf | 5.06 |
| Symbol | Symbol | Symbol.ttf | 5.01 |
| Tahoma | Tahoma | Tahoma.ttf | 7.00 |
| Tahoma Bold | Tahomabd.ttf | 7.00 | |
| Times New Roman | Times New Roman | Times.ttf | 7.01 |
| Times New Roman Italic | Timesi.ttf | 7.01 | |
| Times New Roman Bold | Timesbd.ttf | 7.01 | |
| Times New Roman Bold Italic | Timesbi.ttf | 7.01 | |
| Trebuchet MS | Trebuchet MS | Trebuc.ttf | 5.15 |
| Trebuchet MS Italic | Trebucit.ttf | 5.15 | |
| Trebuchet MS Bold | Trebucbd.ttf | 5.15 | |
| Trebuchet MS Bold Italic | Trebucbi.ttf | 5.15 | |
| Verdana | Verdana | Verdana.ttf | 5.33 |
| Verdana Italic | Verdanai.ttf | 5.33 | |
| Verdana Bold | Verdanab.ttf | 5.33 | |
| Verdana Bold Italic | Verdanaz.ttf | 5.33 | |
| Webdings | Webdings | Webdings.ttf | 5.01 |
| Wingdings | Wingdings | Wingding.ttf | 5.01 |
| Yu Gothic | Yu Gothic Light | YuGothL.ttc | 1.90 |
| Yu Gothic Regular | YuGothR.ttc | 1.90 | |
| Yu Gothic Medium * | Yugothm.ttc | 1.90 | |
| Yu Gothic Bold | YuGothB.ttc | 1.90 | |
| Yu Gothic UI Light * | YuGothL.ttc | 1.90 | |
| Yu Gothic UI Semilight * | YuGothR.ttc | 1.90 | |
| Yu Gothic UI Regular * | Yugothm.ttc | 1.90 | |
| Yu Gothic UI Semibold * | YuGothB.ttc | 1.90 | |
| Yu Gothic UI Bold * | YuGothB.ttc | 1.90 |
Fonts included in Feature On Demand (FOD) packages
Here’s a comprehensive listing of which font families are included with each of the optional font features. Some font families may include multiple fonts for different weights and styles.
