Onon字体 - 蒙古文无衬线报体
Onon字体 - logo

使用方法

安装指南

嵌入办公软件

嵌入网页

嵌入小程序

嵌入网页

在网页html中嵌入字体


在css代码中，我们主要使用的是font-face这个属性，它的主要功能就是把自己定义的Web字体嵌入到网页中。


            
    
                
  1. @font-face {
    2. 
                
  2.     font-family: <YourWebFontName>;
    3. 
                
  3.     font-family: <YourWebFontName>;
    4. 
                
  4.     [font-weight: <weight>];
    5. 
                
  5.     [font-style: <style>];
    6. 
                
  6. }  其中关于属性的解释（有些可能没有用到）
    7. 
                
    
                
  7. font-family：设置文本的字体名称。
    8. 
                
  8. font-style：	设置文本样式。
    9. 
                
  9. font-variant：设置文本是否大小写。
    10. 
                
  10. font-weight：设置文本的粗细。
    11. 
                
  11. font-stretch：设置文本是否横向的拉伸变形。
    12. 
                
  12. font-size：设置文本字体大小。
    13. 
                
  13. src：设置自定义字体的相对路径或者绝对路径，注意，此属性只能在@font-face规则里使用。
    14.

*.CSS文件内容


            
    
                
  1. @font-face {
    2. 
                
  2.     font-family: 'OnonSoninSans';
    3. 
                
  3.     src: url("./assets/font/OnonSoninSans.woff") format("woff"),  //IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+
    4. 
                
  4.          url("./assets/font/OnonSoninSans.ttf") format("truetype"),  //IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+
    5. 
                
  5.          url("./assets/font/OnonSoninSans.otf") format("opentype"); // Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+
    6. 
                
  6.     font-weight: normal;
    7. 
                
  7.     font-style: normal;
    8. 
                
  8. }
    9.

所以根据这些，我们可以将字体文件放在指定的目录下，然后更改url的地址，对你的字体命名。然后，像正常字体一样去使用它吧。