search

spotfiresoftware / spotfire-mods

Spotfire® Mods
https://spotfiresoftware.github.io/spotfire-mods/
Other
56 stars 41 forks source link

can not load iconFont resource #140

Closed jasperatnanjin closed 6 months ago

jasperatnanjin commented 6 months ago

Hi I used layui's font icon resource in writing the mods component, and added a reference to it in mod-manifest.json, but it didn't seem to work, and I still got an error: do you know way ,and how to resolve it thanks:

mod-manifest.json: "files": [ .... "layui/font/iconfont.eot", "layui/font/iconfont.woff2", "layui/font/iconfont.woff", "layui/font/iconfont.svg", "layui/font/iconfont.ttf", ... ] Access to font at 'http://127.0.0.1:59633/layui/font/iconfont.woff2?v=282' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. layui.css:1 GET http://127.0.0.1:59633/layui/font/iconfont.woff2?v=282 net::ERR_FAILED 200 127.0.0.1/:1 Access to font at 'http://127.0.0.1:59633/layui/font/iconfont.woff?v=282' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. layui.css:1 GET http://127.0.0.1:59633/layui/font/iconfont.woff?v=282 net::ERR_FAILED 200 127.0.0.1/:1 Access to font at 'http://127.0.0.1:59633/layui/font/iconfont.ttf?v=282' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. layui.css:1 GET http://127.0.0.1:59633/layui/font/iconfont.ttf?v=282 net::ERR_FAILED

objerke commented 6 months ago

Hi @jasperatnanjin, As mentioned in the getting started section this is a browser limitation that limit how fonts are loaded.

What you need to do when loading a font is to embed the font as a data URI inside a css file. There are online tools, such as font squirrel, that can take a font and generate a CSS file with the font embedded inside it as a base64 data URI. Then when that is done you can embed that stylesheet in your mod-manifest.json and the index.html page. The font css file will contain statements similar to this one for Roboto: image

I can also recommend in this case to only take only a single font as each font adds size to the mod bundle. Woff is well supported by all browsers and no others are needed.

jasperatnanjin commented 6 months ago

thank you very much! I have solved this problem by use your method