Question

我对我在制作网站上看到的问题感到非常困惑。

当我通过“www”访问该网站时，一切看起来都符合预期，并与我的本地开发环境相匹配。 css是现货。

但是如果我只使用域名访问同一个站点，那么字体会变得更大，而且网站会变得难看。有没有人遇到类似的问题？

也许我错过了一些东西，因为现在有100件东西在我身边飞来飞去。

有问题的网址：

http://www.connect4fitness.com
http://connect4fitness.com

并且，是的DNS条目是正确的。两个网址都应该提供相同的页面！

Answer 1

我猜你只是在错误的缩放级别观看。你使用的是什么浏览器？在字体较大的版本中，请确保您在100％缩放级别（通常通过按Ctrl + 0（即零）完成或使用Ctrl +放大和缩小（加或减+/-）大多数现代浏览器会记住特定网站的最后缩放级别，并区分子网域，因此您在某些时候放大它只会在http://connect4fitness.com上记住它。

Answer 2

如果您在CSS中使用@font-face规则，则字体的路径必须与请求它们的域匹配 - 这称为相同的原始策略

例如，如果您正在查看此页面：

http://example.com/about

并且字体通过CSS提供：

http://www.example.com/css/screen.css

您将遇到相同的原始政策，浏览器不会下载字体文件（因为CSS中指定的字体是从其他域提供的。请记住，www等子域在技术上是被视为一个单独的域名。）

解决问题的最简单方法是使用相对（../）或绝对路径（/）链接到CSS中的字体，并尽可能避免使用您网站的FQDN。

好（相对）：

@font-face {
    font-family: 'MyWebFont';
    src: url('../fonts/webfont.eot');
    src: url('../fonts/webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/webfont.woff') format('woff'),
         url('../fonts/webfont.ttf') format('truetype'),
         url('../fonts/webfont.svg#svgFontName') format('svg');
}

最佳（绝对）：

@font-face {
    font-family: 'MyWebFont';
    src: url('/fonts/webfont.eot');
    src: url('/fonts/webfont.eot?#iefix') format('embedded-opentype'),
         url('/fonts/webfont.woff') format('woff'),
         url('/fonts/webfont.ttf') format('truetype'),
         url('/fonts/webfont.svg#svgFontName') format('svg');
}

错误（FQDN）：

@font-face {
    font-family: 'MyWebFont';
    src: url('http://example.com/fonts/webfont.eot');
    src: url('http://example.com/fonts/webfont.eot?#iefix') format('embedded-opentype'),
         url('http://example.com/fonts/webfont.woff') format('woff'),
         url('http://example.com/fonts/webfont.ttf') format('truetype'),
         url('http://example.com/fonts/webfont.svg#svgFontName') format('svg');
}

当网站通过www访问并直接通过@时，CSS的工作方式不同

2 个答案: