简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

CSS: 引用字体文件，以及字体图标的使用_html/css_WEB-ITnose

WBOY
Release： 2016-06-21 08:48:43
Original
1572 people have browsed it

1. css文件（fonts.css）中引用字体文件：

@font-face {

    font-family: 'bbBUS';

    src: url('texticon.eot'); /*IE9*/

    src: url('texticon.eot?#iefix')     format('embedded-opentype'),

    url('texticon.woff') format('woff'),

    url('texticon.ttf')     format('truetype');

}

tip:字体文件放在当前文件统计目录下，这样有更好的移植性（经测试，字体文件是要绝对路径引用，而css文件不用。亲测如此）

2. 字体图标的定义：

根据做字体图标时的对照图来定义：

Copy after login
   
3.字体图标的使用(HTML页面)：
   
   
效果：
   
   
 
                   

            

            

                                

                    Related labels：
                    

                        CSS: 引用字体文件，以及字体图标的使用                    

                

                                
source：php.cn

                            

            

                                    
                        Previous article：IE11 transition background-size 失效_html/css_WEB-ITnose
                    
                                    
                        Next article：HTML基础知识自学教程_html/css_WEB-ITnose
                    
                            

            

       
                
Statement of this Website

                
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

            

           

            

                
Latest Articles by Author

                
            

            

                
Latest Issues

                

                                        

                        

                            Unable to populate my request body to test registration functionality using Postman *FIXED*
                            I'm developing a very simple social media application where users can register, log in, cr...
                            

                                

                                     From 2024-04-01 10:09:37
                                

                                

                                    
  0 

                                    
1

                                    
348

                                

                            

                        

                    

                    

                                    

            

            

                

                    
Related Topics

                    More>
                    
                

                

                    
                

            

        

    

    

        

            
Popular Recommendations

            

                
            

        

        
        

            

                
Popular Tutorials

                More>
                
            

            

                

                    
Related Tutorials 

                    
Popular Recommendations

                    
Latest courses

                

                
                
                
            

            
        


        

            

                
Latest Downloads

                More>
                
            

                        
            

                

                    
Web Effects 

                    
Website Source Code

                    
Website Materials

                    
Front End Template

                

                
                
                
                
            

            
        

    





    

        

            

                

                    

                        About us
                        Disclaimer
                        Sitemap
                        

                    

                    
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！