Блог

Главная - Вопросы по программированию - не влияет на пользовательский интерфейс

не влияет на пользовательский интерфейс

#html #css #internet-explorer-11

Вопрос:

Я использую IE 11, и у меня есть следующий HTML:

 <tr bgcolor="#eeeeee" bordercolor="#000000" valign="top">
        <td bordercolor="#eeeeee" align="right" valign="top">Blitz-/Sturm-Anbieter:<br/>
                <span style="font-weight: 100 !important;">Deaktiviert, weil nicht mehr notwendig</span>
        </td>
</tr>

Однако в браузере отображается следующая таблица:

введите описание изображения здесь

Как вы можете заметить, текст «Deaktiviert, weil nicht mehr notwendig» выглядит точно так же, как текст «Blitz-/Sturm-Anbieter:», хотя у меня есть декларация

 <span style="font-weight: 100 !important;">

до этого.

Не могли бы вы сказать мне, в чем проблема?

Спасибо и с наилучшими пожеланиями, Алекс

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

1. Иногда это может быть проблема с шрифтом. Если шрифт не обеспечивает такого веса, он просто отображается нормально. Вы пробовали другие элементы с этим шрифтом?

2. Поддерживает ли шрифт, который вы используете 100 , вес шрифта?

3. Я также пробовал <span style=»вес шрифта: легче !важно;»>, но та же проблема.

4. если вы используете шрифты Google, вы можете сделать что-то вроде <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;600amp;display=swap" rel="stylesheet">

5. Встроенный стиль правильный, поэтому это должно быть вызвано используемым шрифтом. Вы включаете прямую ссылку на шрифты Google или используете font-face? Не все шрифты поддерживают вес 100, в этом случае вы можете попробовать 300, что обычно является выбранным весом для облегченной версии.

Ответ №1:

Используйте эти ссылки в своем head-part ( font-weight: 100,300,400 and 500 are selected here ):

 body {
  font-family: 'Roboto', sans-serif;
}

#one {
  font-weight: 100;
}

#two {
  font-weight: 300;
}

#three {
  font-weight: 400;
}

#four {
  font-weight: 500;
} 
 <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500amp;display=swap" rel="stylesheet">
    
<span id="one">100</span>
<span id="two">300</span>
<span id="three">400</span>
<span id="four">500</span>

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

1. К сожалению, это мне не помогло

Ответ №2:

Это не работает, font-weight: 100 потому что шрифт, который вы используете, не имеет такого точного веса.

Согласно этому документу: Если точный указанный вес недоступен, то он следует правилу резервных весов. Правило означает , что если шрифт имеет только normal и bold , когда значение веса равно 100-500, normal будет использоваться для фактического рендеринга, а когда значение веса равно 600-900, bold будет использоваться для фактического рендеринга. Я думаю, что именно с такой ситуацией вы сталкиваетесь.

Если вы хотите font-weight: 100 работать, вам нужно использовать шрифт с таким значением веса, например, google fonts Roboto. Вы можете использовать его, как показано ниже, он хорошо работает в IE:

 body {
  font-family: 'Roboto';
} 
 <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;400amp;display=swap" rel="stylesheet">

<table>
  <tr bgcolor="#eeeeee" bordercolor="#000000" valign="top">
    <td bordercolor="#eeeeee" align="right" valign="top">
      Blitz-/Sturm-Anbieter:<br />
      <span style="font-weight: 100 !important;">Deaktiviert, weil nicht mehr notwendig</span>
    </td>
  </tr>
</table>
Метки: