css - 为什么我的字体在 Web 上看起来与在 ttf/woff 文件中看起来不同？

Question

This is what the font should look like.
Here's what the font looks like in the .ttf file.
And this is what the font looks like on my website.

#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>

Answer 1

text-shadow 甚至适用于字体中最微弱的线条，因此艺术字体中的每个污迹/刮痕最终都会有一个 1 像素的白色阴影。尝试删除 text-shadow: 1px white;。