为什么我的字体在网页上和ttf/woff文件中看起来不一样？

Question

这是字体应该看起来的样子。
这是.ttf文件中字体的样子。
而这是我的网站上字体的样子。

#top {
    margin:             30px 30px 0px 150px;
    border:             3px solid maroon;
    text-align:       center;
    height:             130px;
    background:     url(text/dumbledore.gif) right no-repeat, url(text/gandalf.gif) left no-repeat, url(text/tenor.gif) center;
}

@font-face {
    font-family: 'Beyond Wonderland';
    src: url('fonts/BeyondWonderland.eot');
    src: url('fonts/BeyondWonderland.eot?#iefix') format('embedded-opentype'),
        url('fonts/BeyondWonderland.woff2') format('woff2'),
        url('fonts/BeyondWonderland.woff') format('woff'),
        url('fonts/BeyondWonderland.ttf') format('truetype'),
        url('fonts/BeyondWonderland.svg#BeyondWonderland') format('svg');
    font-weight:  normal;
    font-style:   normal;
}

h1#title-text {
  font-family:  'Beyond Wonderland';
  border:       none;
  font-size:    450%;
  width:        100%;
  text-shadow:  1px white;
  color:        black;
  text-align:   center;
  padding:      20px 0px 20px 0px;
  margin:       auto;
}

    <div id="top">
        <h1 id="title-text" title="You are viewing the home page">Welcome to the Erevrast Home Page!</h1>
    </div>

- Elijah Whitney

Answer 1

您在CSS中两次定义了字体的src。使用逗号分隔将在无法加载字体时显示其后面的字体。例如：

src: url(nonexistentfont.ttf), Arial;

会显示字体“Arial”，因为其他字体无法加载。

Try this

#top {
    margin: 30px 30px 0px 150px;
    border: 3px solid maroon;
    text-align: center;
    height: 130px;
    background: url(text/dumbledore.gif) right no-repeat, url(text/gandalf.gif) left no-repeat, url(text/tenor.gif) center;
}

@font-face {
    font-family: 'Beyond Wonderland';
    src: url(fonts/BeyondWonderland.eot), url(fonts/BeyondWonderland.eot?#iefix) format('embedded-opentype'), url(fonts/BeyondWonderland.woff2') format('woff2'), url('fonts/BeyondWonderland.woff') format('woff'), url('fonts/BeyondWonderland.ttf') format('truetype'), url('fonts/BeyondWonderland.svg#BeyondWonderland') format('svg');
    font-weight: normal;
    font-style: normal;
}

h1#title-text {
  font-family:  'Beyond Wonderland';
  border:       none;
  font-size:    450%;
  width:        100%;
  text-shadow:  1px white;
  color:        black;
  text-align:   center;
  padding:      20px 0px 20px 0px;
  margin:       auto;
}

    <div id="top">
        <h1 id="title-text" title="You are viewing the home page">Welcome to the Erevrast Home Page!</h1>
    </div>

- Parking Master

Answer 2

对于艺术字体中最细微的线条，text-shadow 都会产生作用，因此每一个污点/刮痕都会带有一个1像素的白色阴影。尝试移除 text-shadow: 1px white;。

- Luke