0
元は私のデザインはこのように見えました。大きな丸のロゴがイメージだったので、読み込み時間がかなり悪いことを除いて、私は満足していました。css/htmlで縦に2つの単語の間のスペースを減らす方法
だから私はロード時間を高速化を考えることができる唯一の方法は、CSS3の画像から、それを変更することで、残念ながら私は素敵な交換を見つけることができませんでしたが、これはどのような私です今は持っている。
さて、今私の主な関心事は、「パベル」と「デザイン」の間のギャップを軽減しようとしているが、私はどのようにわかりません。
重要なことではありませんが、貴重な時間をかけずに元のデザインを維持できる方法があれば、それほど重要ではありません。私はimgの品質を落とそうとしましたが、サイズは1.6MBから140kbになりました。
div.homepage {
\t position: fixed;
\t text-align: center;
\t margin: 0 auto;
\t left: 0;
\t right: 0;
}
/* Logo Design */
div.circle {
\t margin: 0 auto;
\t border-radius: 50%;
\t width: 900px;
\t height: 900px;
\t display: flex;
\t justify-content: center;
\t align-items: center;
\t flex-direction: column;
}
p.pavel, p.design {
\t font-family: 'Open Sans', sans-serif;
\t font-size: 10em;
\t color: \t #708090;
}<body>
\t <div class="homepage">
\t \t <div class="circle">
\t \t \t <p class="pavel">Pavel</p>
\t \t \t <p class="design">Design</p>
\t \t </div>
\t \t <ul>
\t \t \t <li class="button"><a href="index.html" data-text="Home">Home</a></li>
\t \t \t <li class="button"><a href="about.html" data-text="About">About</a></li>
\t \t \t <li class="button"><a href="services.html" data-text="Services">Services</a></li>
\t \t \t <li class="button"><a href="contact.html" data-text="Contact">Contact</a></li>
\t \t </ul>
\t </div>
</body
JSFiddleまたはcodepenの例を提供できますか？ – AVI