Add MIME (2003, 2008) _win servers for IIS, such as SVG and Woff font formats

Source: Internet
Author: User
Tags php language

Now the font icon has gradually replaced the picture, the mobile end is also very convenient to use.

Using the font file to display the vector icon, in order to be able to display the icon correctly on IIS, you can support the icon font file by increasing the Mime-type of IIS

Next, add IIS to the mime of the SVG, EOT, Woff, OTF, TTF, and other font format files.

Add the following two types of files:

. svg Image/svg+xml
. Woff Application/font-woff

I also write the other kinds below for later study:

. EOT Application/vnd.ms-fontobject
. OTF Application/octet-stream
. TTF Application/octet-stream

Finish

Today the test of a code, in the local all normal, but uploaded to the server after the discovery of some icons do not show. The picture exists, but also can not visit, on Baidu, this. svg images want to be open on IIS, and mapping is required.

1, first open iis-find your site right key properties-http head-click MIME type

2, click New, according to the following content input
name extension:. svg
MIME type: Image/svg+xml

After all add complete click OK save exit Refresh the page to see if the display is normal, if not yet check if you have less punctuation.

The same IIS6 can support WOFF/WOFF2, and the correct MIME information should be written like this:

extension:. woff
MIME type: Application/x-font-woff
Extension:. woff2
MIME type: Application/x-font-woff

You can see the effect when you restart the site after adding it. IIS7 The following deployment methods refer to the IIS7 environment to implement SVG/WOFF/WOFF2 font normal display

Recently the company's several WordPress website from AWS moved to Windows environment, and toss for a while. Today, fresh out of a new problem, found on the site of the Woff font again reported 404. After the confirmation file has been uploaded to the correct path, recall the problem that the font file was not found in the IIS environment that you ran into before, and feel that it should be the reason for not adding a MIME type to the font file. Windows Azure is not a virtual host, so it will not give me an IIS let me configure, only think of other ways.

Fortunately, a Web.config file was found in the root directory of the site, and the impression that this should be the asp.net application configuration file. Although WordPress is using the PHP language, but for file type management, should not involve what language of the site, as long as the correct configuration of the server environment.

Open web.config, an XML file with the MIME type information for an SVG file, similar to what was previously configured in IIS:

<mimemap fileextension= ". svg" mimetype= "Image/svg+xml"/>
The MIME types for several font files in IIS before are set as follows:

Dots in the web.config add these two:

<mimemap fileextension= ". Woff" mimetype= "Application/x-font-woff"/>
<mimemap fileextension= ". Woff2" mimetype= "Application/x-font-woff"/>
the label structure of the MIME type in the entire file should be this:

<?xml version= "1.0" encoding= "UTF-8"?>
<configuration>
<system.webServer>
<staticContent>
<mimemap fileextension= ". svg" mimetype= "Image/svg+xml"/>
<mimemap fileextension= ". Woff" mimetype= "Application/x-font-woff"/>
<mimemap fileextension= ". Woff2" mimetype= "Application/x-font-woff"/>
</staticContent>
<rewrite>...</rewrite>
</system.webServer>
</configuration>

Of course you can set it up through iis7.5.

After the completion of the Refresh page, Woff and other fonts can be successfully loaded, IIS6 under the setting method, please refer to how to let IIS6 support SVG image display

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.