徽标在 Chrome 中在线变形

Question

我网站的徽标在 Chrome 中出现变形。我在 Explorer 中检查过，没问题。我的意思是标志有一个蓝色的水滴，它应该取代撇号。然而，在 Chrome 中，水滴盖住了它后面的 E。

我在 VS Code 和 Dreamweaver 上检查了 html 代码，徽标的设计没问题。

我不知道问题出在浏览器上还是我用来构建网站的应用程序上。

你能帮我解决这个问题吗？

请在下面找到我网站的源代码：

<!doctype html>
<html><!-- InstanceBegin template="/Templates/site-template.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- Global site tag (gtag.js) - Google Analytics --> 
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-200254003-1"></script> 
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-200254003-1');
</script>
<meta charset="utf-8">
<!-- InstanceBeginEditable name="doctitle" -->

    <title>Comment Choisir un Pommeau de Douche Économiseur d'Eau ? Le Guide d'Achat</title>

    <meta name="description" content="Vous voulez savoir comment choisir un pommeau de douche économiseur d'eau ? Voici notre guide d'achat !">

<!-- InstanceEndEditable -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles.css" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<!-- InstanceBeginEditable name="head" -->

<!-- InstanceEndEditable -->
</head>

<body>
<div class="hero-image">
  <div class="container">
    <header>
        <div class="logo"><a href="/"><img src="svg/logo-economiseur-d-eau.svg" alt="Logo Économiseur d'Eau" width="260" height="39"></a> </div>
        <nav>
            <div class="mobile-view"><img src="svg/burger-menu.svg" alt="Menu hamburger Économiseur d'Eau" width="32" height="25"></div>
            <div class="desktop-view">
                <ul>
                    <li><a href="#">Guide d'Achat</a></li>
                    <li><a href="#">Comparatif</a></li>
                    <li><a href="#">Top 10</a></li>
                    <li><a href="#">Marques</a></li>
                    <li><a href="#">Tests</a></li>
                    <li><a href="#">Blog</a></li>
                </ul>
            </div>
        </nav>
    </header>
    <!-- InstanceBeginEditable name="main-content" -->

    <main>

      <div class="hero-content">

        <h1>COMMENT CHOISIR UN ÉCONOMISEUR D’EAU ? LE GUIDE D’ACHAT</h1>

        <hr>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor in cididunt ut labore et dolore magna aliqua. Quis ipsum suspendisse ultrices gravida. Risus commodo viverra</p>

      <a href="#" title="Comment choisir un pommeau de douche économiseur d'eau ? Le guide d'achat" class="btn-black">LIRE LA SUITE</a>      </div>

      <div class="image-grid">

        <div class="col col-lg float-left col-md col-xs"><a href="#" target="_blank"><img src="images/magichome-pommeau-douche-anti-calcaire-economiseur-d-eau-haute-pression-filtre-a-trois-niveaux.webp" width="331" height="268" alt="MagicHome - Pommeau de douche économiseur d'eau - ionique haute pression filtre à 3 niveaux" class="responsive-image"></a></div>

        <div class="col col-lg float-left col-md col-xs"><a href="#" target="_blank"><img src="images/innislink-douchette-a-main-salle-de-bain-7-couleurs-led-pommeau-douche-haute-pression-economiseur-d-eau-pulverisateur-double-filtre-antichlore.webp" alt="Innislink - Douchette à main - salle de bain - 7 couleurs led - pommeau de douche haute pression - pulvérisateur économie d'eau" width="331" height="268" class="responsive-image"></a></div>

        <div class="col col-lg float-left col-md col-xs"><a href="#" target="_blank"><img src="images/omasi-pommeau-douche-haute-pression-anti-calcaire-filtrant-economiseur-d-eau-universelle-massage-3-modes.webp" alt="Omasi - Pommeau de douche haute pression anticalcaire filtrant économiseur d'eau universelle - massage 3 modes" width="331" height="268" class="responsive-image"></a></div>

        <div class="col col-lg float-left col-md col-xs"><a href="#" target="_blank"><img src="images/acgam-pommeau-douche-economiseur-d-eau.webp" alt="Acgam - Pommeau de douche économiseur d'eau anticalcaire haute pression 3 modes - tuyau flexible" width="331" height="268" class="responsive-image"></a></div>

        <div class="col col-lg float-left col-md col-xs"><a href="#" target="_blank"><img src="images/vadiv-pommeau-douche-anticalcaire-filtrant-3-modes-economie-d-eau-haute-pression-universelle.webp" alt="Vadiv - Pommeau de douche anticalcaire filtrant 3 modes économiseur d'eau haute pression universelle" width="331" height="268" class="responsive-image"></a></div>

        <div class="col col-lg float-left col-md col-xs"><a href="#" target="_blank"><img src="images/olliwon-pommeau-douche-haute-pression-acier-inoxydable-304-douchette-salle-de-bain-economie-d-eau-installation-facile.webp" alt="Olliwon - Pommeau de douche haute pression acier inoxydable 304 - douchette salle de bain économiseur d'eau" width="331" height="268" class="responsive-image"></a></div>

      </div>

    </main>

    <!-- InstanceEndEditable -->
    <footer>
      <div class="social-icons"><a href="mailto:contact@economiseur-d-eau.fr" target="_blank"><img src="images/social-facebook.webp" alt="Économiseur d'Eau Facebook" width="41" height="41" class="facebook-icon"><img src="images/social-twitter.webp" alt="Économiseur d'Eau Twitter" width="41" height="41" class="twitter-icon"><img src="images/social-mail.webp" alt="Économiseur d'Eau Email" width="41" height="41" class="email-icon"></a></div>
      <div class="copyright">Copyright © 2021 - Économiseur d’Eau - Tous droits réservés</div>
    </footer>
  </div>
</div>
</body>
<!-- InstanceEnd --></html>

我的网站地址如下：https://www.economiseur-d-eau.fr

Answer 1

您应该在使用之前将徽标的字体栅格化。检查 SVG 文件

徽标在 Chrome 中在线变形

Logo distorted online in Chrome

html

google-chrome

dreamweaver