Размер шрифта по умолчанию в VMWare Clarity v3 и Angular v9 - PullRequest
Новая
       76

Размер шрифта по умолчанию в VMWare Clarity v3 и Angular v9

1 голос
/ 17 марта 2020

Я полный нуб к Angular и Ясности. Я в самом начале своего проекта, но размер шрифта очень маленький. Я просмотрел документацию Clarity и не уверен, что мне не хватает. Например, p, .p1 должен быть размером шрифта 14px согласно документации. Тем не менее, он выглядит очень маленьким в браузере (Chrome), и когда я проверяю свой исходный код с помощью инструментов разработчика, он показывает размер шрифта как .583333rem, что означает 8px. Размер шрифта в моем заголовке тоже маленький. Любая помощь или pu sh в правильном направлении будет высоко ценится. Спасибо!

app.component. html

<clr-main-container class="main-container">
    <app-header></app-header>
    <div class="content-container">
        <div class="content-area">
            <router-outlet></router-outlet>
        </div>
    </div>
    <app-footer></app-footer>
</clr-main-container>

header.component. html

<clr-header class="header header-1" *ngIf="showHeader() == true">
    <button type="button" class="header-hamburger-trigger" aria-label="Open"><span></span></button>
    <div class="branding">
        <a class="nav-link">
            <img src="../../../assets/images/logo.png">
        </a>
    </div>
    <div class="divider"></div>
    <div class="header-nav clr-nav-level-1">
        <a class="nav-link" href="#" aria-label="Test1"><span class="nav-text">Test1</span></a>
        <a class="nav-link active" href="#" aria-label="Test2"><span class="nav-text">Test2</span></a>
    </div>
    <div class="header-actions">
       <a href="#" class="nav-link nav-icon" aria-label="Ticket">
           <clr-icon shape="help"></clr-icon>
       </a>
        <clr-dropdown>
            <button class="nav-text dropdown-toggle" clrDropdownToggle aria-expanded="true" aria-label="open user profile">
                <clr-icon shape="user" size="24"></clr-icon>
                {{ first_name }} {{last_name }}
                <clr-icon shape="caret down"></clr-icon>
            </button>
            <clr-dropdown-menu *clrIfOpen clrPosition="bottom-right">
                <div clrDropdownItem>Change Password</div>
                <div clrDropdownItem>Log Out</div>
            </clr-dropdown-menu>
        </clr-dropdown>   
    </div>
</clr-header>

Ответы [ 2 ]

0 голосов
/ 31 марта 2020

Это связано с тем, что Clarity использует необычно большой: root размер шрифта 24px. Вот почему он показывает 14px на своем сайте: 24px * 0.583333rem = 14px.

Но если ваш: root размер шрифта меньше (как это должно быть и, вероятно, есть), он будет отображаться как слишком маленький для прочитайте: 13.7 * 0.583333rem = 8px.

Решение : если вы согласны с этим, установите: root размер шрифта, который вы можете найти или объявить в вашей глобальной (s) css файл, до 24px, например: 

:root { font-size: 24px }

PS: я не могу понять, почему размер шрифта root такой большой, если вам нужно все уменьшить. потом ... это настоящий вопрос, поэтому, если кто-то знает ответ, пожалуйста, просветите меня.

0 голосов
/ 18 марта 2020

Спасибо вам обоим за ваш ответ! Там не было ничего противоречащего с CSS. Я выполнил поиск по всему каталогу node_modules / clr и нашел несколько ссылок на .583333rem в файле clr-ui.min. css. Я вернулся к документации Clarity, которая гласит: 

/* 
* The following percentage would produce a UI that follows a design with a 32px vertical rhythm 
* and 8px grid – 32 ÷ 0.192 = 166.66667.
*/
html{
font-size: 166.66667%;
}

Я добавил это в свой файл стилей. css и тада! Я не знаю, является ли документация Clarity неправильной или вводящей в заблуждение, но из раздела типографии у меня сложилось впечатление, что шрифт основного текста должен быть 14px. Независимо от того, это работает, и больший размер шрифта больше не заставляет мои глаза болеть. Еще раз спасибо!

...