Предисловие:
В прошлом внешний интерфейс использовался для получения рисунков в формате psd, поэтому мне нужно было использовать ps, чтобы вырезать рисунки, и мне нужно было измерять размер и расстояние между рисунками один за другим в psd. необходимо загрузить проект дизайна непосредственно в Blue Lake.Напишите код интерфейса через аннотацию Blue Lake! Далее я расскажу о том, как восстановить пользовательский интерфейс во фронтенде согласно черновому дизайну голубого озера!
Пример:
Теперь возьмите следующую страницу регистрации в качестве примера!
размер:
Во-первых, обратите внимание на то, является ли дизайн ПК или мобильным, и имеет ли мобильный дизайн ширину 375 пикселей или 750 пикселей.На приведенном выше рисунке показан мобильный дизайн шириной 375 пикселей.
Шрифт:
Вы можете начать с регистрации 2 слов из названия картинки выше! Перейди к нижнему коду Голубого озера!
код голубого озера
width: 36px;
height: 24px;
font-size: 17px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #333333;
line-height: 24px;
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> *{padding: 0;margin: 0;}</style><body> <div class="header"> <div class="text">注册</div> </div> <style> .text{ width: 100%; text-align: center; font-size: 17px; font-weight: 400; color: #333333; } </style></body></html>
Видно, что мой код удалил фиксированную ширину и высоту, отмеченные Blue Lake, потому что наш контент часто основан на контенте, возвращаемом в фоновом режиме, а фиксированного контента нет!Шрифты также обычно используют шрифты, поставляемые с система! Откройте наш код в браузере Chrome, чтобы узнать
1,
2,
Видно, что наша реализация отличается от проекта пользовательского интерфейса: высота двух зарегистрированных слов в проекте дизайна составляет 24 пикселя, а высота двух зарегистрированных слов, которые мы написали, составляет 22 пикселя, что на 2 пикселя меньше, чем в проекте дизайна. ; Основная причина в том, что проект дизайна использует шрифт Pingfang. И пишем его шрифтом Microsoft Yahei по умолчанию!
О шрифтах: Windows обычно по умолчанию использует шрифты Microsoft Yahei. Компьютеры Apple по умолчанию обычно используют шрифты Pingfang, а телефоны Android — шрифты Siyuan. Потому что наши дизайны обычно разрабатываются с помощью компьютеров Apple. Все общие дизайны, как правило, шрифты Pingfang!
Добавьте к приведенному выше тексту класса
font-family: PingFangSC-Regular, PingFang SC;
Обнаружено, что браузер отображает шрифт Microsoft Yahei.
Просмотр системных шрифтов:
Мой компьютер можно найти, щелкнув правой кнопкой мыши, персонализировав настройки и найдя параметры шрифта! Щелчком по шрифту. Обнаружено, что исходный файл шрифта находится в C:\Windows\Fonts; откройте каталог шрифтов на компьютере, чтобы найти шрифты, поддерживаемые текущим компьютером!
Как видно из рисунка выше, мой компьютер не поддерживает шрифты Pingfang. Таким образом, по умолчанию отображается шрифт Microsoft Yahei;
Категория шрифта:
Нажмите на шрифт Microsoft Yahei: я обнаружил, что в нем есть 3 шрифта: обычный, полужирный и тонкий!
Соответствующий черновому дизайну голубого озера собственный вес под шрифтом проекта дизайна, иногда мы обнаруживаем, что собственный вес Apple равен Medium, что соответствует стилю шрифта PingFang Medium Ping Fang-Jian Zhong Hei;
Общие классификации шрифтов Pingfang:
PingFang Light PingFang-Simple Body, PingFang Regular PingFang-Simple Regular, PingFang Semibold PingFang-Simple Medium Bold, PingFang Medium PingFang-Simple Medium Bold, PingFang Bold PingFang-Simple Bold
Загрузить шрифты:
1. Загрузите существующие шрифты в системе
font-family:'宋体';
Таким образом, вы обнаружите, что шрифт будет изменен на Arial;
2. Загрузите внешние шрифты
Нужно написать и скачать файлы шрифтов, загружайте через @font-face!
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><style> *{padding: 0;margin: 0;}</style><body> <div class="header"> <div class="text">注册</div> </div> <style> @font-face { font-family: "PingFang-Regular"; src: url("./font/PingFang-Regular.ttf"); } .text{ width: 100%; text-align: center; font-size: 17px; font-family:'PingFang-Regular'; font-weight: 400; color: #333; } </style></body></html>
Я положил шрифт Pingfang, скачанный из интернета, в каталог шрифтов, его можно загрузить через font-face! Окончательный эффект
Высота шрифта стала 24px, шрифт тоже Pingfang, которого нет в загруженной системе!
Оптимизация загрузки внешних шрифтов
В обычных условиях перед загрузкой файла шрифта браузер будет использовать альтернативный шрифт для отображения текста, который называется FOIT (Flash of Unstyled Text).Однако кажется, что за исключением IE, другие браузеры будут ждать 3 секунды, чтобы отображать системный шрифт.Таким образом, будет мигать белым явлением до 3 секунд, и такой пользовательский опыт очень плохой.
Чтобы решить эту проблему,CSS Fonts Module Level 3В , добавлено свойство font-display, которое позволяет браузеру немедленно использовать альтернативный шрифт, заменять его сразу после загрузки веб-шрифта и выполнять повторную визуализацию.
@font-face { font-family: 'family-name'; src: url('${url}'); font-display: swap;}
замена: если установленный шрифт еще недоступен, браузер сначала будет использовать альтернативный шрифт для отображения и заменит альтернативный шрифт при загрузке установленного шрифта;
Загружать только используемые шрифты
npm install font-spider
font-spider ./demo/*.html
Файл шрифта Pingfang, сгенерированный словесным пауком, весит всего 2 КБ;
Окончательное предложение
Много раз мы редко загружаем внешние шрифты.В настоящее время, чтобы сильно восстановить эффект шрифта проекта дизайна пользовательского интерфейса, мы можем выбрать;
1. Напишите высоту строки мертвого шрифта;
line-height: 24px;
Добавление высоты строки к зарегистрированному классу txt может обеспечить высоту шрифта 24 пикселя.
2. Дайте всем шрифтам одинаковое соотношение размера шрифта к высоте;
Для шрифта Pingfang мы обнаружили, что высота шрифта 30px равна 42px, высота шрифта 20px равна 28px;
Размер шрифта и высота шрифта имеют относительно регулярное соотношение 1,4.
в ссс. мы можем определить
body{ font: 12px;line-height: 1.4;}
Определив шрифт выше, даже если шрифт Pingfang не введен. Высота шрифта также может в основном соответствовать проекту дизайна!