html - 徽标在 Chrome 中在线变形
问题描述
我的网站徽标在 Chrome 中变形。我检查了资源管理器,它很好。我的意思是标志有一个蓝色的水滴,它应该代替撇号。然而,在 Chrome 中,drop water 超过了它之后的 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
解决方案
在使用徽标之前,您应该栅格化徽标的字体。检查 SVG 文件
推荐阅读
- gtsummary - 在 GT 回归中设置指定的因子水平作为参考?
- node.js - 从视图中执行控制器中的功能(EJS NodeJs)
- android - 谷歌支付意图选择器未调用 onActivityResult.?但电话支付和 paytm 在 android 中运行良好
- java - 有人可以告诉我如何为这种方法进行单元测试吗?
- vue.js - 处理自定义行点击
- python - 尝试从外部 Python 连接到 Docker 中的 SQL Server
- java - 几乎相同的语句,但值不同
- javascript - 创建多维元素的重复
- python - Pytest:从外部函数访问夹具
- mongodb - Kubernetes MongoDB 副本集创建失败