简体中文(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
1520 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

                

                                        

                        

                            Regular expressions involving AND in python
                            I've been struggling for a while now trying to get the correct regex for the following tas...
                            

                                

                                     From 2023-09-14 16:30:41
                                

                                

                                    
  0 

                                    
1

                                    
216

                                

                            

                        

                    

                    

                                        

                        

                            Unable to add font styles to WordPress theme's functions.php file
                            So I'm making a custom theme for WordPress and I'm trying to load the site's styles into t...
                            

                                

                                     From 2023-09-10 22:09:17
                                

                                

                                    
  0 

                                    
1

                                    
291

                                

                            

                        

                    

                    

                                        

                        

                            Sequentially rename files on upload based on existing files in directory
                            I'm using this (php) upload code I found online for an image upload form. I realize there ...
                            

                                

                                     From 2023-09-10 13:14:12
                                

                                

                                    
  0 

                                    
1

                                    
310

                                

                            

                        

                    

                    

                                        

                        

                            Insert HTML formatting into email body using Suitescript
                            I've written a script that will send an email alert if a certain type of product is missin...
                            

                                

                                     From 2023-09-09 20:41:10
                                

                                

                                    
  0 

                                    
1

                                    
304

                                

                            

                        

                    

                    

                                        

                        

                            How to use CSS to change font color in HTML based on tag text content
                            So I have a radio button with the text "Yes" and "No" and if any one o...
                            

                                

                                     From 2023-09-08 20:57:35
                                

                                

                                    
  0 

                                    
1

                                    
327

                                

                            

                        

                    

                    

                                    

            

            

                

                    
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！