Блог

Главная - Вопросы по программированию - Как избавиться от пробела над шрифтом, чтобы правильно выровнять его?

Как избавиться от пробела над шрифтом, чтобы правильно выровнять его?

#html #css

Вопрос:

В настоящее время я перепроектирую свой веб-сайт, и у меня был несколько странный выбор, когда дело доходит до идентификации текущей страницы, на которой находится пользователь.

Я знаю, что моя текущая проблема связана с моим выбором шрифта ( Noto Sans JP ), потому что в нем много white-space вышеперечисленного, но я действительно хочу использовать его, если это возможно.

Итак, вот моя текущая реализация: текущая реализация моего дизайна

Рабочий пример:

 @import url('https://fonts.googleapis.com/css2?family=Noto Sans JP:wght@700amp;display=swap');

* {
  padding: 0px;
  margin: 0px;
  color: white;
  font-family: 'Noto Sans JP', sans-serif;
}

.wrapper {
  background: white;
}

.grid {
  width: 100vw;
  height: 100vh;

  display: grid;
  grid-template-columns: 150px auto;
  grid-template-rows: 150px auto;
  grid-gap: 2px;
}

.grid div {
  background: black;
}

.titleWrapper {
  position: relative;

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;

  padding-top: 20px;
}

.title {
  margin: 0;
  padding-left: 15px;

  font-size: 75px;
  font-weight: bold;
  text-transform: uppercase;

  color: black;
  -webkit-text-stroke: 2px white;

  writing-mode: vertical-rl;
  text-orientation: sideways;

  -moz-transform: scale(-1, -1);
  -o-transform: scale(-1, -1);
  -webkit-transform: scale(-1, -1);
  transform: scale(-1, -1);
} 
 <div class="wrapper">
  <div class="grid">
    <div>Itza<br/>Mi</div>
    <div>Nav</div>
    <div class="titleWrapper"><p class="title">Homepage</p></div>
    <div>Hello</div>
  </div>
</div>

However, I’m not the biggest fan of having it like this because the text still has a bit of white-space on top (as shown in the following pic) and I have to use a padding to actually center it on the container.

white-space above text

I was wondering if there is maybe a better way of doing what I’m doing here.

Метки: ,