Question

我使用真棒字体已经很长时间了。但是几天前，我遇到了一种情况，我需要自动设置字体大小，以使内容覆盖父元素的整个空间。

我知道一些适合文本匹配的库和方法，但问题是它们适用于元素内的文本。但是，字体真棒可以与css content属性一起使用，我们需要手动设置字体的大小。有什么办法可以设置字体大小以缩放到父元素。

css示例：

div {
  width: 300px;
  height: 300px;
  border:1px solid;
}

i {
  font-size:20px;
}

<link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet" />
<div>
  <i class="far fa-user-circle" />
</div>

Answer 1

这是完成任务的脚本

CELERY_BROKER_URL = 'mongodb://localhost:27017'
CELERY_RESULT_BACKEND = "mongodb"
CELERY_IGNORE_RESULT = False
CELERY_TRACK_STARTED = True
CELERY_MONGODB_SCHEDULER_DB = "celery"
CELERY_MONGODB_SCHEDULER_COLLECTION = "schedules"
CELERY_MONGODB_SCHEDULER_URL = "mongodb://localhost:27017"
CELERY_ACCEPT_CONTENT = ['application/json']
CELERY_TASK_SERIALIZER = 'json'
CELERY_RESULT_SERIALIZER = 'json'
CELERY_TIMEZONE = TIME_ZONE

const getComputedStyle = (element, style) => {
  let computedStyle = window.getComputedStyle(element, null);  
  return computedStyle[style];
};

let container = document.querySelector('div');
let icon = document.querySelector('div i');
let h = getComputedStyle(container, 'height');
icon.style.fontSize = `${h}`;

div {
  width: 300px;
  height: 300px;
  border:1px solid;
}

i {
  font-size:20px;
}

将CSS内容属性的字体大小缩放为父级

1 个答案: