Блог

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

Как установить разные размеры для отдельных шрифтов в CSS?

#html #css #font-face #font-size #katex

#HTML #css #шрифт-лицо #размер шрифта #katex

Вопрос:

У меня есть wabpage (HTML), который использует разные шрифты ttf, загруженные с помощью @font-face{} каскадной таблицы стилей. Но я обнаружил, что один из шрифтов меньше остальных. У меня есть Katex, загруженный на той же странице, чтобы отобразить математику.

Проблема, с которой я сталкиваюсь, заключается в том, что, поскольку я не знаю, как установить подходящий размер для каждого шрифта, когда я устанавливаю определенный размер шрифта a для элементов, которые я использую font A , и b для элементов, которые я использую font B , шрифт также влияет на отображение математических уравнений в формате Katex. Итак, если шрифт A по умолчанию был очень маленьким, мне нужно изменить размер шрифта по умолчанию и сделать его намного больше, чтобы он выглядел нормально, но тогда более крупный шрифт влияет на математические уравнения, отображаемые Katex, и делает их очень большими!

Итак, мой вопрос:

Как я могу установить разные размеры для разных шрифтов в @font-face{} самом файле, чтобы использование определенного шрифта не влияло на другие элементы и средства визуализации JS, такие как Katex.
Я хотел что-то вроде:

 @font-face {
font-family:myFamily;
src:url(locationOfTtfFont);
font-size:medium;
}
@font-face {
font-family:myFont2;
src:url(locationOfTtf2);
font-size:larger;
}

Но я не смог заставить вышеупомянутое работать. Кроме того, посмотрите на правило Font Face @w3schools.com , я обнаружил, что размер шрифта отсутствует в списке разрешенных дескрипторов. Тем не менее, в той же статье W3 Schools я нашел другой дескриптор шрифта: font-stretch , но это тоже не сработало.

Комментарии:

1. Размер шрифта должен быть определен для элемента. Использование его внутри @font-face не даст никакого эффекта.

2. Вы действительно хотите изменить размеры, которые отображают ваши шрифты a и b, или вы хотите убедиться, что размер шрифта Katex является постоянным и читаемым независимо от размера шрифта окружающего текста?

3. Любой из них подойдет @AHaworth. Я хочу, чтобы все шрифты были удобочитаемыми и отображались в одном и том же размере. Но некоторые из моих пожеланий по умолчанию очень маленькие, а другие большие, поэтому меньшие трудно читать. Я хочу установить там размеры отдельно, не влияя на размер формул Katex, которые находятся между текстом.

Ответ №1:

Katex использует размер шрифта по умолчанию 1.2xem, где em — это размер em шрифта окружающего текста. т. Е. Он немного увеличивается, чтобы сделать подстрочные и надстрочные символы более удобочитаемыми.

Проблема в вопросе заключается в том, что, следовательно, размер шрифта уравнений изменяется в зависимости от используемых различных шрифтов, один из которых, естественно, меньше другого, поэтому необходимо увеличить его размер, что делает уравнения слишком большими.

Можно исправить размер шрифта Katex, сделав его независимым от размера окружающего текста, включив настройку размера шрифта в заголовок документа. введите описание изображения здесь

Это, конечно, может вызвать другую проблему, например, если в сноске требовалось иметь гораздо меньший катекс, поэтому я не уверен, что это полный ответ на вопрос. Вот фрагмент на случай, если код полезен для тестирования разных настроек.

 <!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3 Aro6EYUG4 cU KJWu/X" crossorigin="anonymous">
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"
        onload="renderMathInElement(document.body);"></script>
  <style>
  .katex {
    font-size: 20px;
  }
  
  p {
  margin: 20px;
  }
  </style>
  </head>
  <body>

  <div style="text-align:center;font-size: 20px;">
  The equations' font-size has been set by including:<br><p style="text-align:center">amp;<styleamp;>
  .katex {
    font-size: 20px;
  }
  amp;</styleamp;></p> in the head of the document after everything else.
  
    <br>-------------------
  
    <p style="font-size: 20px;">
      This text has font-size: 20px and here is the equation 
      <div id="eqn1" style="text-align: center;"></div>
    </p>
    -------------------
    <p style="font-size: 16px;">
      This text has font-size: 16px but the equation size is the same as above
      <div id="eqn2" style="text-align: center;"></div>
    </p>
  </div>

  <script>

  function start() {
    katex.render("c = \pm\sqrt{a^2   b^2}", document.getElementById("eqn1"), {
    throwOnError: false
    });
  
    katex.render("c = \pm\sqrt{a^2   b^2}", document.getElementById("eqn2"), {
    throwOnError: false
    });
  }
  window.onload=start;
  </script> 
  </body>
</html>

Метки: