[problems encountered]
try to specify Web fonts in CSS using @ font-face. It is found that font effects can be displayed successfully when the linked font file is local, such as:
@font-face{
font-family:"Emblema One";
src:url("WebFonts/EmblemaOne/EmblemaOne-Regular.woff"),
url("WebFonts/EmblemaOne/EmblemaOne-Regular.ttf");
}
h1{
font-family:"Emblema One", sans-serif;
}but when the linked font file is stored on the server, it does not take effect successfully, such as
@font-face{
font-family:"Emblema One";
src:url("http://www.XXX.com/WebFonts/EmblemaOne/EmblemaOne-Regular.woff"),
url("http://www.XXX.com/WebFonts/EmblemaOne/EmblemaOne-Regular.ttf");
}
h1{
font-family:"Emblema One", sans-serif;
}[attempts made]
1. First of all, the path of the remote file must have been repeatedly confirmed, no problem;
2. When searching for answers on the Internet, I saw that someone said that it might be a problem of font file MIME type, so I added:
AddHandler application/x-font-woff .woff
AddHandler application/x-font-ttf .ttf after being added, the link to the remote font file can be opened and downloaded directly with the browser, but the problem remains unsolved;
3. After using 360browser and IE, you can do it locally, but not remotely.
[Test Environment]
Server side (remote)
Host Type: Ali Cloud Virtual Host
operating system: CentOS 6.564 bit
client (local)
operating system: Windows 10 Family Chinese version 1803