Solve the cross-origin access problem of firefox and IE9 on the icon font, ie9icon

Solve the cross-origin access problem of firefox and IE9 on the icon font, ie9icon

What is cross-origin access and why is there a cross-origin restriction? Everything has to begin with the same-source policy of the browser.

Same-origin policy: Is the core and basic security function of the browser. If the same-origin policy is missing, the normal function of the browser may be affected. It can be said that the Web is built on the same-origin policy, the browser is only an implementation of the same-source policy.

Same-origin policy of the browser: Restrict "document" or scripts from different sources to read or set certain attributes for the current "document. The existence of the same-origin policy limits that the "Source" script from A can only operate the DOM of the "same-origin" page, and the "cross-source" operation will be rejected for the page from B.

What is the same origin? "Img.company.com" and "agent.company.com" are not the same origins? For a long time, I thought these two domains are all subdomains of "company.com", which is the same source. This is actually wrong.

Same Source: Same host (same domain name, subdomain name, or IP address), same port number, and same protocol.

URL	Same source?	Cause
Http://agent.soufun.com/dir1/a.aspx	Yes
Http://agent.soufun.com/dir2/a.aspx	Yes
Https://agent.soufun.com/secure.htm	No	Different protocols
Http://agent.soufun.com: 81/dir2/a. aspx	No	Different ports
Http://img.soufun.com/dir/a.jpg	No	Different subdomains

 

Icon font: Currently, mainstream browsers (including IE6) support CSS 3 custom fonts (@ font-face), so you can try to use font to replace various icons of the Image Display website. This advantage is because it is a vector, the amplification is not distorted, the size is small, the disadvantage is also very obvious, that is, the font at the same time can only be monochrome.

After the function is implemented, the IE is displayed properly (left), but the Firefox Font is not displayed (right ). The following error is reported on the Firefox Firebug console:Cross-Source request blocked: Same-source policy does not allow reading http://img.company.com/secondhouse/image/magentnew/styles/fonts20140704/icomoon.woff? Remote resources on ivldoa. You can move resources to the same domain name or enable CORS to solve this problem."

Why is IE different from Firefox? According to the information, "Firefox and IE9 do not support cross-origin access to the icon font ", you must configure the Header parameter "Access-Control-Allow-Origin" on the server where the font file is located to Allow the current domain name. In addition, after verification, you must set the parameter "Access-Control-Allow-Origin" to "*". the current domain name is not allowed. I do not know why.

How to add the specific configuration? The method is unknown because the O & M personnel helped to configure the configuration. For details, refer to "cross-origin access To icon font fonts in firefox and IE9". the core is to add the response output of "Access-Control-Allow-Origin. To determine the feasibility of the scheme, I used Fiddler to intercept the http Response and add a header. For details, refer to "two methods for setting HTTP Response Headers in fiddler". again, I felt the powerful functions of Fiddler.

 

How can I use icon font in css on a webpage? For detailed instructions, do not send links. The Chinese tutorial 80% is not detailed yet.

<Style> @ font-face {font-family: 'iconfont-10'; src: url ('at least);/* IE9 */src: url ('at .alicdn.com/t/font_1401158182_6869004.eot? # Iefix ') format ('embedded-opentype'),/* IE6-IE8 */url ('at .alicdn.com/t/font_1401158182_6869004.woff') format ('woff '), /* chrome, firefox */url ('at .alicdn.com/t/font_1401158182_6869004.ttf') format ('truetype '),/* chrome, firefox, opera, Safari, Android, iOS 4.2 + */url ('at .alicdn.com/...onfont') format ('svg ');/* iOS 4.1 -*/}. iconfont {-webkit-font-smoothing: antialiased;-webkit-text-stroke-width :. 2 p X;-moz-osx-font-smoothing: grayscale;}. iconfont-10 {font-family: 'iconfont-10 '! Important; font-style: normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width:. 2px;-moz-osx-font-smo...

Methods for changing the default font size of ExtJs

1、you only need to replace all 11px in the ext-all.css Style File With 12px, which is a unified 12 PX font. However, if you want to increase the size of the file, you should not only replace the 11px of the source file with 15px, but also replace the 12px related to the font with 15px. After the change, the button appears with a margin. Add it to the style file. ext-ie. x-btn-text-icon. x-btn-center. x-btn-text {padding: 3px 0px 0px;} the edges are gone! 2. Because the Extjs font sizes are different in different browsers or different versions of the same browser. And it looks small. Not pleasing to the eye. Query it online to obtain a useful message: Extjs uses the 11px font in many cases, and the 11px size is an edge font. Different browsers may render 11px differently, IE rendering is similar to 12px, while Firefox is similar to 10px, resulting in the font being too small in FF. To thoroughly solve the problem, open ext-all.css, search for all 11px and replace it with 12px. Problem solved 3. Extjs version 3.2.1. I found a lot of information on the Internet when I changed the font size. x-btn-text {font-size: 15px;} is fine, but it is still not useful in IE9 and FF. Then try it in ext-all.css to find the setting.