某些字母溢出他们的容器 - 可以做任何事吗？

Question

我注意到左边的某些字母溢出了他们的容器的问题，但我还没有看到有人提出这个问题。

我尝试过几种不同的字体系列，但它们似乎都有同样的问题。

的jsfiddle：https://jsfiddle.net/3h5poynt/

HTML（角度）

<div class="personal-profile container-column">
<mat-card class="header">
    <section class="cover-section"></section>
    <section class="intro-section">
        <div class="intro-header">
            <div class="profile-photo-wrapper">
                <img src="/assets/img/profile-picture-placeholder.png" alt="" class="profile-photo" />
            </div>

            <div class="badges-container">
                <ul class="badges-list">
                    <li>
                        <img
                            src="/assets/badges/business-plans-180x180.png"
                            alt="Business plan"
                            matTooltip="Something"
                            matTooltipClass="badge-tooltip"
                            matTooltipPosition="above"
                        />
                    </li>
                    <li><img src="/assets/badges/calling-customers-180x180.png" alt="Calling customers" /></li>
                    <li><img src="/assets/badges/finance-180x180.png" alt="Finance" /></li>
                    <li>
                        <img src="/assets/badges/selling-to-customers-180x180.png" alt="Selling to customers" />
                    </li>
                    <li><img src="/assets/badges/social-media-180x180.png" alt="Social media" /></li>
                </ul>
            </div>
        </div>
        <div class="info-container">
            <div class="personal-info">
                <div class="name-text">{{ profile ? profile.name : '' }}</div>
                <div class="description">{{ profile ? profile.personal_description : '' }}</div>
            </div>

            <div class="additional-info"></div>
        </div>
    </section>
</mat-card>

SCSS

@import '../../../variables';

.mat-card {
    padding: 0;
    overflow: hidden;
    section {
        padding: 20px;
    }
}

.badge-tooltip {
    background: #3f51b5;
    color: white;
    font-family: $font-open-sans;
}

.personal-profile {
    margin-top: 50px;
    .header {
        min-height: 500px;
        width: 100%;

        .cover-section {
            background: url('/assets/img/coverpicture.png') center/cover;
            height: 225px;
        }

        .intro-section {
            .intro-header {
                size: auto;
                .profile-photo-wrapper {
                    position: relative;
                    margin-top: -87px;
                    display: inline-block;
                    .profile-photo {
                        width: 150px;
                        height: 150px;
                        border: 4px solid white;
                        border-radius: 10px;
                        box-shadow: inset 0 1.5px 3px 0 rgba(0, 0, 0, 0.15), 0 1.5px 3px 0 rgba(0, 0, 0, 0.15);
                        background-color: #fff;
                    }
                }

                .badges-container {
                    vertical-align: middle;
                    display: inline-block;
                    margin-top: -87px;
                    .badges-list {
                        list-style: none;
                        li {
                            float: left;
                            padding: 0 10px 0 10px;
                            img {
                                width: 40px;
                                height: 40px;
                            }
                        }
                    }
                }
            }

            .info-container {
                padding-top: 15px;
                display: grid;
                grid-template-columns: 1fr 1fr;
                font-family: $font-open-sans;

                .personal-info,
                .additional-info {
                    display: flex;
                    flex-direction: column;
                }

                .personal-info {
                    .name-text {
                        font-size: 1.3em;
                    }
                }
            }

        }
    }
}

主要SCSS

/* You can add global styles to this file, and also import other style files */
@import '~@angular/material/prebuilt-themes/indigo-pink.css';
@import '_variables.scss';

* {
    margin: 0;
    padding: 0;
    font-family: $font-open-sans;
}

html {
    font-family: 'Roboto', sans-serif;
}
html,
body {
    height: 100%;
    width: 100%;
    background-color: #e9ebee;
}

.container-column {
    display: flex;
    flex-direction: column;
    width: 80%;
    margin: auto;
}

.container-row {
    display: flex;
    flex-direction: row;
    width: 80%;
    margin: auto;
}

有什么东西是我遗失的，或者这是必须被黑客攻击的东西？

Answer 1

乔纳斯

有些字体“就像那样”。你会发现（特别是现在有一些更业余的免费字体），一些字体的下降器，上升器，饰物等恰好与我们（程序员，读者）期望它们符合的边界重叠。

如果你真的想在这个特定的上下文中使用这样的字体，那么你必须围绕字体的限制进行编程。

在你的小提琴中，我只是将padding-left添加到name-text风格：

.name-text{
  font-size: 1.3em;
  font-family: "Open Sans", sans-serif;
  background: red;
  padding-left:15px; /* voila! */
}

试试小提琴吧。

如果左侧轴承在字体上的初始字符上完全不同，那么您可以使用根据第一个字符的子字符串值更改的填充来设置各种样式。听起来像是一个活生生的地狱，但是如果你真的想要它，你去吧。

或者您可以选择不同的字体。