当前位置：网站首页>Dtcloud uses custom fonts

Dtcloud uses custom fonts

2022-07-24 13:19:00 【Jiang Zhenjian 15954039008】

dtcloud Support the use of custom fonts , To get rid of the limitation of default fonts ：
@font-face
@font-face CSS at-rule Specify a custom font for displaying text ; Fonts can be loaded from remote servers or locally installed fonts . If provided local() function , Find the specified font name from the user's local , And found a match , Local fonts will be used . otherwise , The font will use url() Function download resources .
By allowing authors to provide their own Fonts ,@font-face Make design content possible , At the same time, it will not be called " The Internet - Security " Font restrictions ( Fonts are so common that they can be widely used ). Specifying the search and use of locally installed font names can make fonts more customizable than basic fonts , At the same time, this function can be realized without relying on the network .
Use... At the same time url() and local() When the function , Copies of fonts that have been installed for the user are used when they need to be used , If you don't find a copy of the font locally, you will go to the copy you downloaded to find the font .
@font-face Rules are not only used in CSS The top floor of , It can also be used in any CSS In the condition group rule .

@font-face {
    
  font-family: "Open Sans";
  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"),
       url("/fonts/OpenSans-Regular-webfont.woff") format("woff");
}

summary
This one is called @font-face Of CSS @ The rules , It allows web developers to specify online fonts for their web pages . In this way, the author prepared his own typeface ,@font-face It can eliminate the dependence on the user's computer font . @font-face Not only can it be placed in CSS Top of , It can also be placed in @ The rules Of Condition rule group in .

grammar

@font-face {
    
  [ font-family: <family-name>; ] ||
  [ src: <src>; ] ||
  [ unicode-range: <unicode-range>; ] ||
  [ font-variant: <font-variant>; ] ||
  [ font-feature-settings: <font-feature-settings>; ] ||
  [ font-variation-settings: <font-variation-settings>; ] ||
  [ font-stretch: <font-stretch>; ] ||
  [ font-weight: <font-weight>; ] ||
  [ font-style: <font-style>; ] ||
  [ size-adjust: <size-adjust>; ] ||
  [ ascent-override: <ascent-override>; ] ||
  [ descent-override: <descent-override>; ] ||
  [ line-gap-override: <line-gap-override>; ]
}
where 
<family-name> = <string> | <custom-ident>+

Value
font-family
The specified font name will be used for font or font-family attribute ( i.e. font-family: ; )
src
The location of the remote font file URL Or the font name on the user's computer , have access to local Syntax specifies the font on the user's local computer by name ( i.e. src: local(‘Arial’); ). If the font cannot be found , Will try other sources , Until you find it .
font-variant (en-US)
A font-variant value.
font-stretch (en-US)
A font-stretch value.
font-weight (en-US)
A font-weight value.
font-style
about src Description of the indicated font . If the required font matches the description , Use this font-face Defined font .
unicode-range (en-US)
In the @font-face As defined in unicode Font range
Example
The following example simply defines a downloadable font , And applied to the whole document body On the label .

View live sample

<html>
<head>
  <title>Web Font Sample</title>
  <style type="text/css" media="screen, print">
    @font-face {
    
      font-family: "Bitstream Vera Serif Bold";
      src: url("https://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
    }

    body {
     font-family: "Bitstream Vera Serif Bold", serif }
  </style>
</head>
<body>
  This is Bitstream Vera Serif Bold.
</body>
</html>

In the next example , The user's local font is used "Helvetica Neue Bold" Backup of ; If the current user ( browser ) The font is not installed ( Both possible font names have been tried ), Will use the downloaded font "MgOpenModernaBold.ttf" Instead of ：

@font-face {
    
  font-family: MyHelvetica;
  src: local("Helvetica Neue Bold"),
  local("HelveticaNeue-Bold"),
  url(MgOpenModernaBold.ttf);
  font-weight: bold;
}

The following example has been deleted from the original English .

This example defines a new font , Words of normal thickness are in fonts Times New Roman, Bold characters are Consolas.

@font-face {
    
    font-family: myFirstFont;
    src: local("Times New Roman");
    font-weight:normal;
}

@font-face {
    
    font-family: myFirstFont;
    src: local(Consolas);
    font-weight:bold;
}

Be careful
the Web fonts Still limited by the same domain ( The font file must be in the same domain as the web page calling it ), But you can use HTTP access controls Lift this restriction .
Because there is no for TrueType(ttf), OpenType(otf) and Web Open File Format(WOFF) Font definition MIME, Therefore, you cannot set specific for these font types MIME（ actually WOFF Of MIME Will be application/font-woff, But browsers don't know about this MIME The identification of is not uniform , Other fonts are similar , Can be used temporarily application/octet-stream）.
You can't be in a CSS Define... In the selector @font-face . for example , This is not valid ：

.className {
    
  @font-face {
    
    font-family: MyHelvetica;
    src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
        url(MgOpenModernaBold.ttf);
    font-weight: bold;
  }
}

原网站

版权声明
本文为[Jiang Zhenjian 15954039008]所创，转载请带上原文链接，感谢
https://yzsam.com/2022/203/202207211747523288.html

当前位置：网站首页>Dtcloud uses custom fonts

Dtcloud uses custom fonts

边栏推荐

猜你喜欢

随机推荐