Почему на iPhone некорректно отображается шрифт?

Question

EtherealEclipse

nextjs

Почему на iPhone некорректно отображается шрифт?

У меня возникли проблемы с отображением локальных шрифтов на iPhone при использовании модуля next/font. Шрифты из next/font/google отображаются нормально. Подозреваю, что причина может быть в сглаживании шрифтов. Пожалуйста, проверьте код, который я использую для локального шрифта BebasNeue:

import localFont from 'next/font/local';

export const bebasNeue = localFont({
  src: '../../../public/fonts/BebasNeue/BebasNeue-Bold.woff2',
  display: 'swap',
});

15 февраля 2024 г. 15:08

Ответы на вопрос 1

Похожие вопросы

Answer 1

Вероятно, проблема с отображением локального шрифта на iPhone связана с неправильными путями к файлам шрифтов или неподдерживаемым форматом шрифта. Ваш код показывает использование модуля `next/font/local`, который, похоже, не является стандартным модулем в Next.js.

Вместо этого рекомендуется использовать стандартный модуль `next/font` для загрузки и подключения шрифтов в вашем проекте Next.js. Вот пример использования:

1. Убедитесь, что шрифты BebasNeue находятся в папке "public/fonts/BebasNeue/" в вашем проекте Next.js.

2. Установите модуль `next-font` следующей командой:

```shell
npm install --save next-font
```

3. Создайте файл "font.config.js" в корневой папке вашего проекта и добавьте следующий код:

```jsx
const withFonts = require('next-fonts');
module.exports = withFonts();
```

4. В вашем файле компонента (например, "index.js"), импортируйте шрифт:

```jsx
import '../font.config.js';
import { BebasNeue } from '../public/fonts/BebasNeue/BebasNeue-Bold.woff2';

// Используйте шрифт как обычный компонент
const MyComponent = () => {
  return (
    <div>
      <h1 style={{ fontFamily: 'BebasNeue' }}>Пример текста</h1>
    </div>
  );
};

export default MyComponent;
```

Данный код предполагает, что в папке "public/fonts/BebasNeue/" находится файл шрифта "BebasNeue-Bold.woff2".

Если проблема все еще не решена после применения этих изменений, убедитесь, что файл шрифта в формате WOFF2 корректен и может быть открыт на iPhone. Если возникнут дополнительные трудности, рекомендуется обратиться за помощью к специалисту в области разработки веб-приложений.