Tôi muốn đặt kích thước phông chữ tối thiểu cho mọi phần tử trong trang HTML của mình.
Ví dụ: nếu có các phần tử có kích thước phông chữ nhỏ hơn 12px, thì chúng sẽ thay đổi thành 12px.
Nhưng nếu có các phần tử có font-size grater thì 12px, chúng sẽ không thay đổi.
Có cách nào để làm điều đó với CSS không?
Câu trả lời:
Không. Mặc dù bạn có thể đặt kích thước phông chữ cơ sở khi bodysử dụng thuộc font-sizetính, nhưng bất kỳ thứ gì sau đó chỉ định kích thước nhỏ hơn sẽ ghi đè quy tắc cơ sở cho phần tử đó. Để thực hiện những gì bạn muốn, bạn sẽ cần sử dụng Javascript.
Bạn có thể lặp lại các phần tử trên trang và thay đổi các phông chữ nhỏ hơn bằng cách sử dụng một cái gì đó như sau:
$("*").each( function () {
var $this = $(this);
if (parseInt($this.css("fontSize")) < 12) {
$this.css({ "font-size": "12px" });
}
});
Đây là Fiddle mà bạn có thể xem nó được thực hiện: http://jsfiddle.net/mifi79/LfdL8/2/
p{ font-size: 1vw } @media (max-width: 1000px){ p{ font-size: 10px } }
Trong CSS3, có một thủ thuật đơn giản nhưng tuyệt vời cho điều đó:
font-size:calc(12px + 1.5vw);
Điều này là do phần tĩnh của calc () xác định mức tối thiểu. Mặc dù phần động có thể co lại gần 0.
12px(trong trường hợp này).
Kể từ giữa tháng 12 năm 2019, hàm tối thiểu / tối đa CSS4 chính xác là những gì bạn muốn:
(cẩn thận, đây là điều rất mới, các trình duyệt cũ hơn (hay còn gọi là IE & msEdge) chưa hỗ trợ)
(được hỗ trợ kể từ Chromium 79 & Firefox v75)
https://developer.mozilla.org/en-US/docs/Web/CSS/min
https://developer.mozilla.org/en-US/docs/Web/CSS/max
Thí dụ:
blockquote {
font-size: max(1em, 12px);
}
Bằng cách đó, kích thước phông chữ sẽ là 1em (nếu 1em> 12px), nhưng ít nhất là 12px.
Rất tiếc, tính năng CSS3 tuyệt vời này chưa được bất kỳ trình duyệt nào hỗ trợ, nhưng tôi hy vọng điều này sẽ sớm thay đổi!
Biên tập:
Điều này từng là một phần của CSS3, nhưng sau đó đã được lên lịch lại cho CSS4.
Kể từ ngày 11 tháng 12 năm 2019 , hỗ trợ đã đến với Chrome / Chromium 79 (bao gồm cả trên Android và Android WebView) và như vậy cũng có trong Microsoft Chredge hay còn gọi là Anaheim, bao gồm Opera 66 và Safari 11.1 (bao gồm iOS)
:root { --responsive-font-size-primary: min(2em, max(0.5em, 5vmin)); }làm cho việc sử dụng trở nên đơn giản:font-size: var(--responsive-font-size-primary);
Có vẻ như tôi hơi muộn nhưng đối với những người khác gặp sự cố này, hãy thử mã này
p { font-size: 3vmax; }
sử dụng bất kỳ thẻ nào bạn thích và kích thước bạn thích (thay thế 3)
p { font-size: 3vmin; }
được sử dụng cho kích thước tối đa.
Sử dụng một truy vấn phương tiện. Ví dụ: Đây là một cái gì đó tôi đang sử dụng kích thước ban đầu là 1,0vw nhưng khi nó đạt đến 1000, chữ cái trở nên quá nhỏ nên tôi mở rộng quy mô
@media(max-width:600px){
body,input,textarea{
font-size:2.0vw !important;
}
}
Trang web tôi đang làm việc này không đáp ứng cho> 500px nhưng bạn có thể cần thêm. Ưu điểm, lợi ích của giải pháp này là bạn giữ nguyên kích thước phông chữ mà không có các chữ cái siêu nhỏ và bạn có thể giữ cho nó miễn phí.
CSS có một hàm kẹp () giữ giá trị giữa giới hạn trên và giới hạn dưới. Hàm kẹp () cho phép chọn giá trị giữa trong phạm vi giá trị giữa giá trị tối thiểu và giá trị lớn nhất đã xác định.
Nó chỉ đơn giản là có ba chiều:
hãy thử với mã bên dưới và kiểm tra thay đổi kích thước cửa sổ, điều này sẽ thay đổi kích thước phông chữ bạn thấy trong bảng điều khiển. tôi đặt giá trị lớn nhất 150pxvà giá trị nhỏ nhất 100px.
$(window).resize(function(){
console.log($('#element').css('font-size'));
});
console.log($('#element').css('font-size'));h1{
font-size: 10vw; /* Browsers that do not support "MIN () - MAX ()" and "Clamp ()" functions will take this value.*/
font-size: max(100px, min(10vw, 150px)); /* Browsers that do not support the "clamp ()" function will take this value. */
font-size: clamp(100px, 10vw, 150px);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<center>
<h1 id="element">THIS IS TEXT</h1>
</center>Giải pháp CSS:
.h2{
font-size: 2vw
}
@media (min-width: 700px) {
.h2{
/* Minimum font size */
font-size: 14px
}
}
@media (max-width: 1200px) {
.h2{
/* Maximum font size */
font-size: 24px
}
}
Chỉ trong trường hợp nếu một số người cần kết hợp scss:
///
/// Viewport sized typography with minimum and maximum values
///
/// @author Eduardo Boucas (@eduardoboucas)
///
/// @param {Number} $responsive - Viewport-based size
/// @param {Number} $min - Minimum font size (px)
/// @param {Number} $max - Maximum font size (px)
/// (optional)
/// @param {Number} $fallback - Fallback for viewport-
/// based units (optional)
///
/// @example scss - 5vw font size (with 50px fallback),
/// minumum of 35px and maximum of 150px
/// @include responsive-font(5vw, 35px, 150px, 50px);
///
@mixin responsive-font($responsive, $min, $max: false, $fallback: false) {
$responsive-unitless: $responsive / ($responsive - $responsive + 1);
$dimension: if(unit($responsive) == 'vh', 'height', 'width');
$min-breakpoint: $min / $responsive-unitless * 100;
@media (max-#{$dimension}: #{$min-breakpoint}) {
font-size: $min;
}
@if $max {
$max-breakpoint: $max / $responsive-unitless * 100;
@media (min-#{$dimension}: #{$max-breakpoint}) {
font-size: $max;
}
}
@if $fallback {
font-size: $fallback;
}
font-size: $responsive;
}
AFAIK thì không thể với CSS đơn thuần,
nhưng bạn có thể thực hiện một thao tác jQuery khá tốn kém như:
$('*').css('fontSize', function(i, fs){
if(parseInt(fs, 10) < 12 ) return this.style.fontSize = "12px";
});
Thay vì sử dụng Global Selector, * tôi khuyên bạn (nếu có thể) nên cụ thể hơn với các bộ chọn của bạn.
Các thuộc tính font-min-sizevà font-max-sizeCSS đã bị xóa khỏi thông số kỹ thuật Mô-đun Phông chữ CSS cấp 4 (và không bao giờ được triển khai trong các trình duyệt AFAIK). Và Nhóm công tác CSS đã thay thế các ví dụ CSS bằng các ví dụ font-size: clamp(...)chưa có hỗ trợ trình duyệt tốt nhất, vì vậy chúng tôi sẽ phải đợi các trình duyệt hỗ trợ nó. Xem ví dụ trong https://developer.mozilla.org/en-US/docs/Web/CSS/clamp#Examples .
Đánh giá nhận xét ở trên của bạn, bạn có thể làm điều này với jQuery - đây là:
// for every element in the body tag
$("*", "body").each(function() {
// parse out its computed font size, and see if it is less than 12
if ( parseInt($(this).css("font-size"), 10) < 12 )
// if so, then manually give it a CSS property of 12px
$(this).css("font-size", "12px")
});
Một cách rõ ràng hơn để làm điều này có thể là có lớp "min-font" trong CSS của bạn đặt font-size: 12px và thay vào đó chỉ cần thêm lớp:
$("*", "body").each(function() {
if ( parseInt($(this).css("font-size"), 10) < 12 )
$(this).addClass("min-font")
});
Nó sẽ hoạt động hoàn hảo với 50px. Mà sẽ hoạt động như một tĩnh và do đó là chiều rộng tối thiểu.
font-size: calc(50px + 5vw);