মিনি-ফন্ট-আকার এবং সর্বোচ্চ-ফন্ট-আকারের মতো কোনও জিনিস আছে?

Question 1

আমি ব্রাউজার উইন্ডোতে প্রতিক্রিয়াশীল একটি ডিভিতে একটি ফন্ট তৈরি করার চেষ্টা করছি। এখনও অবধি, এটি নিখুঁতভাবে কাজ করেছে, তবে পিতামাতার ডিভের একটি max-widthরয়েছে 525px। ব্রাউজারটির আরও আকার বদলে ফন্টের আকার পরিবর্তন করা বন্ধ করবে না। এটি আমার আশ্চর্য হিসাবে যেমন একটি জিনিস যদি করেছেন min-font-sizeবা max-font-size, এবং কোন অস্তিত্ব নেই যদি এই ধরনের একটা জিনিস নেই, যদি একটি উপায় আছে অনুরূপ কিছু অর্জন হয়।

আমি ভেবেছিলাম যে শতাংশ শতাংশ ব্যবহার করে font-sizeকাজ হবে তবে পাঠ্যের বিট প্যারেন্ট ডিভ অনুসারে মাপবে না। আমার যা আছে তা এখানে:

পিতামহী বিভাগের জন্য সিএসএস:

.textField{
    background-color:rgba(88, 88, 88, 0.33);

    width:40%;
    height:450px;

    min-width:200px;
    max-width:525px;

    z-index:2;
}

প্রশ্নে টুকরো টুকরো জন্য সিএসএস:

.subText{
    position:relative;
    top:-55px;
    left:15px;

    font-family:"news_gothic";
    font-size:1.3vw;
    font-size-adjust:auto;

    width:90%;

    color:white;

    z-index:1;
}

আমি ইন্টারনেটে বেশ কিছুক্ষণ অনুসন্ধান করেছি, কিন্তু কোন ফলসই হয়নি।

Question 2

না, ন্যূনতম বা সর্বোচ্চ ফন্ট আকারের জন্য কোনও CSS সম্পত্তি নেই। ব্রাউজারগুলির প্রায়শই ন্যূনতম হরফ আকারের জন্য একটি সেটিং থাকে তবে এটি কোনও ব্যবহারকারীর নিয়ন্ত্রণে থাকে, কোনও লেখক নয়।

আপনি ব্যবহার করতে পারেন @mediaপ্রশ্নের পর্দা অথবা উইন্ডোতে প্রস্থ মতো জিনিসের উপর নির্ভর করে কিছু সিএসএস সেটিংস করতে। এই ধরনের সেটিংসে, আপনি উইন্ডোটি খুব সংকীর্ণ হলে উদাহরণস্বরূপ একটি নির্দিষ্ট ছোট মানটিতে ফন্টের আকার সেট করতে পারেন।

Question 3

আপনি একটি সূত্র ব্যবহার করে এবং ভিউপোর্টের প্রস্থ সহ এটি করতে পারেন।

font-size: calc(7px + .5vw);

এটি 7px এ সর্বনিম্ন ফন্টের আকার সেট করে এবং ভিউপোর্টের প্রস্থের উপর নির্ভর করে এটি .5vw দ্বারা প্রশস্ত করে।

শুভকামনা!

Question 4

এটি সিএসএসের সাথে ভাল কাজ করে।

আমি একই সমস্যাগুলির মধ্য দিয়ে গিয়েছি এবং এটি নিম্নলিখিত হিসাবে স্থির করেছি।

নির্দিষ্ট প্রস্থে এবং তারপরে সর্বাধিক আকারের জন্য একটি স্থির "px" আকার ব্যবহার করুন। তারপরে বিভিন্ন ছোট প্রস্থের জন্য, স্ক্রিনের শতাংশ হিসাবে আপেক্ষিক "vw" ব্যবহার করুন।

নীচের ফলাফলটি হ'ল এটি 960px এর নীচে স্ক্রিনগুলিতে নিজেকে সামঞ্জস্য করে তবে উপরে একটি নির্দিষ্ট আকার রাখুন। কেবল একটি অনুস্মারক, শিরোনামে এইচটিএমএল ডক্স যুক্ত করতে ভুলবেন না:

<meta name="viewport" content="width=device-width">

সিএসএসে উদাহরণ:

@media all and (min-width: 960px) {
h1{
    font-size: 50px;
  }
}

@media all and (max-width: 959px) and (min-width: 600px) {
h1{
    font-size: 5vw;
  }
}

@media all and (max-width: 599px) and (min-width: 50px) {
h1{
    font-size: 6vw;
  }
}

আমি আশা করি এটি সাহায্য করবে!

Question 5

আমি এখানে কিছুটা দেরি করে আসছি, আমি এর জন্য এতটা ক্রেডিট পাই না, আমি নীচের উত্তরগুলির মিশ্রণটি করছি কারণ একটি প্রকল্পের জন্য আমাকে তা করতে বাধ্য করা হয়েছিল।

সুতরাং প্রশ্নের উত্তর দিতে: এই সিএসএস সম্পত্তি হিসাবে কিছুই নেই । কেন জানি না, তবে আমি মনে করি কারণ তারা এই সম্পত্তিটির অপব্যবহারের ভয় পেয়েছে তবে আমি কোনও ব্যবহারের ঘটনা পাই না যেখানে এটি মারাত্মক সমস্যা হতে পারে।

যাই হোক না কেন, সমাধান কি?

দুটি সরঞ্জাম আমাদের এটি করতে অনুমতি দেবে: মিডিয়া ক্যোরিস উত্তরগুলি vw সম্পত্তি

1) আমাদের সিএসএসে আমরা প্রতি পদক্ষেপের জন্য একটি মিডিয়া ক্যোয়ারী তৈরি করে একটি স্থির পরিমাণ থেকে অন্য নির্দিষ্ট পরিমাণে ফন্ট পরিবর্তন করে এমন একটি "বোকা" সমাধান রয়েছে। এটি কাজ করে, তবে এটি করা খুব বিরক্তিকর এবং আপনার কোনও মসৃণ রৈখিক দিক নেই।

2) অ্যালমোস্টপিট যেমন ব্যাখ্যা করেছেন, মিনিমার জন্য একটি ব্রিল্যান্ট সমাধান রয়েছে:

font-size: calc(7px + .5vw);

নূন্যতম এখানে ভিউ প্রস্থের 0.5% ছাড়াও 7px হবে। এটি ইতিমধ্যে বেশ শীতল এবং বেশিরভাগ ক্ষেত্রে কাজ করছে । এটিতে কোনও মিডিয়া ক্যোয়ারের প্রয়োজন হয় না, আপনাকে সঠিক পরামিতিগুলি সন্ধান করতে কিছু সময় ব্যয় করতে হবে।

যেহেতু আপনি লক্ষ্য করেছেন এটি একটি লিনিয়ার ফাংশন, বেসিক গণিতগুলি আপনাকে শিখবে যে দুটি পয়েন্ট ইতিমধ্যে আপনাকে পরামিতিগুলি খুঁজে পেয়েছে। তারপরে আপনি খুব বড় পর্দার জন্য এবং মোবাইল সংস্করণের জন্য পিক্সারে ফন্ট-আকারটি ঠিক করুন, তারপরে আপনি কোনও বৈজ্ঞানিক পদ্ধতি করতে চান কিনা তা গণনা করুন। ভেবেছিলেন, এটি একেবারে প্রয়োজনীয় নয় এবং আপনি চেষ্টা করে যেতে পারেন।

3) আসুন ধরুন আপনার কাছে খুব বিরক্তিকর ক্লায়েন্ট রয়েছে (আমার মতো) যিনি একেবারে শিরোনামটি এক লাইনে রাখতে চান এবং আরও কিছু নয়। যদি আপনি অলমোস্টপিট সমাধানটি ব্যবহার করেন তবে আপনি সমস্যায় পড়েছেন কারণ আপনার ফন্টটি বাড়তে থাকবে এবং আপনার যদি একটি নির্দিষ্ট প্রস্থের ধারক থাকে (যেমন বুটস্ট্র্যাপ 1140px বা বড় উইন্ডোতে থাকা কিছু)। এখানে আমি আপনাকে একটি মিডিয়া ক্যোয়ারীও ব্যবহার করার পরামর্শ দিচ্ছি। প্রকৃতপক্ষে আপনি দিকটি অবাঞ্ছিত হওয়ার আগে পিক্স সাইজের সর্বাধিক পরিমাণটি সন্ধান করতে পারেন তবে আপনি নিজের ধারকটিতে পরিচালনা করতে পারেন p এটি আপনার সর্বোচ্চ হবে। তারপরে আপনাকে ঠিক স্ক্রিনের প্রস্থ খুঁজে বের করতে হবে আপনাকে অবশ্যই বন্ধ করতে হবে (ডাব্লু ম্যাক্স)। (আমি আপনাকে আপনার নিজের উপর একটি রৈখিক ক্রিয়াকলাপটি উল্টে দেই)।

তারপরে ঠিক করুন

@media (min-width: [wMax]px) {
    h2{
        font-size: [pxMax]px;
    }
}

তারপরে এটি পুরোপুরি লিনিয়ার এবং আপনার ফন্টের আকার বাড়তে বন্ধ করুন! লক্ষ্য করুন যে আপনার পূর্ববর্তী CSS সম্পত্তি (ক্যালক ...) ডাব্লুএম্যাক্সের অধীনে মিডিয়া ক্যোয়ারিতে রাখার দরকার নেই কারণ মিডিয়া ক্যোয়ারীটিকে আরও অপ্রয়োজনীয় হিসাবে বিবেচনা করা হয় এবং এটি পূর্ববর্তী সম্পত্তিটি ওভাররাইট করে দেবে।

আমি এটির জন্য একটি স্নিপেট তৈরি করা দরকারী বলে মনে করি না, কারণ এটি পুরো পর্দায় তৈরি করতে আপনার সমস্যা হবে এবং এটি পুরোপুরি রকেট বিজ্ঞান নয়।

আশা করি এটি অন্যকে সহায়তা করতে পারে এবং তার সমাধানের জন্য অ্যালমোস্টপিটকে ধন্যবাদ জানাতে ভুলবেন না।

Question 6

এটি আসলে সিএসএস 4-এ প্রস্তাব করা হচ্ছে

ডাব্লু 3 সি-তে কাজ করার খসড়া

উদ্ধৃতি:

এই দুটি বৈশিষ্ট্য কোনও ওয়েবসাইট বা ব্যবহারকারীকে এই দুটি বৈশিষ্ট্যের সাথে সরবরাহিত সীমার মধ্যে কোনও উপাদানটির ফন্টের আকারটি ক্ল্যাম্প করার অনুমতি দেয়। যদি গণনা করা মান হরফ-আকার হরফ-মিন-আকার এবং ফন্ট-সর্বাধিক আকারের তৈরি সীমাগুলির বাইরে থাকে তবে হরফ-আকারের ব্যবহারের মানটি এই দুটি বৈশিষ্ট্যে নির্দিষ্ট মানগুলিতে আবদ্ধ হয়।

এটি আসলে নিম্নলিখিত হিসাবে কাজ করবে:

.element {
    font-min-size: 10px;
    font-max-size: 18px;
    font-size: 5vw; // viewport-relative units are responsive.
}

এর আক্ষরিক অর্থ হ'ল, হরফের আকার ভিউপোর্টের প্রস্থের 5% হবে, তবে কখনও 10 পিক্সেলের চেয়ে ছোট হবে না এবং 18 পিক্সেলের চেয়ে বড় কখনও হবে না।

দুর্ভাগ্যক্রমে, এই বৈশিষ্ট্যটি এখনও কোথাও প্রয়োগ করা হয়নি, (এমনকি caniuse.com এও নয়)।

Question 7

রাকস্যাক উজ্জ্বল, তবে আপনাকে গুল্প বা গ্রান্ট ইত্যাদির মতো সরঞ্জামগুলি তৈরির প্রয়োজন হবে না necess

আমি সহজেই ন্যূনতম এবং সর্বোচ্চ ফন্টের আকারগুলি নিয়ন্ত্রণ করতে CSS কাস্টম সম্পত্তি (সিএসএস ভেরিয়েবলস) ব্যবহার করে একটি ডেমো তৈরি করেছি ।

তাই ভালো:

* {
  /* Calculation */
  --diff: calc(var(--max-size) - var(--min-size));
  --responsive: calc((var(--min-size) * 1px) + var(--diff) * ((100vw - 420px) / (1200 - 420))); /* Ranges from 421px to 1199px */
}

h1 {
  --max-size: 50;
  --min-size: 25;
  font-size: var(--responsive);
}

h2 {
  --max-size: 40;
  --min-size: 20;
  font-size: var(--responsive);
}

Question 8

এগুলি দিয়ে আমি কিছু মসৃণ ফলাফল পেয়েছি। এটি অবিচ্ছিন্ন অংশবিধ কার্যের মতো 3 প্রস্থের ব্যাপ্তির মধ্যে সহজেই প্রবাহিত হয়।

@media screen and (min-width: 581px) and (max-width: 1760px){
    #expandingHeader {
        line-height:5.2vw;
        font-size: 5.99vw;
    }
    #tagLine {
        letter-spacing: .15vw;
        font-size: 1.7vw;
        line-height:1.0vw;
    }
}

@media screen and (min-width: 1761px){
    #expandingHeader {
        line-height:.9em;
        font-size: 7.03em;

    }
    #tagLine {
        letter-spacing: .15vw;
        font-size: 1.7vw;
        line-height:1.0vw;
    }
}

@media screen and (max-width: 580px){
    #expandingHeader {
        line-height:.9em;
        font-size: 2.3em;
    }
    #tagLine {
        letter-spacing: .1em;
        font-size: .65em;
        line-height: .10em;
    }
}

Question 9

আপনি কমপক্ষে এবং সর্বাধিক ফন্টের আকারগুলি নিয়ন্ত্রণ করতে সাস ব্যবহার করতে পারেন। এডুয়ার্ডো বোকাসের একটি উজ্জ্বল সমাধান এখানে।

https://eduardoboucas.com/blog/2015/06/18/viewport-sized-typography-with-minimum- and-maximum-sizes.html

@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;
}

.limit-min {
  @include responsive-font(3vw, 20px);
}

.limit-min-max {
  @include responsive-font(3vw, 20px, 50px);
}

Question 10

দয়া করে মনে রাখবেন যে অ্যাক্সেসযোগ্যতার উদ্বেগের কারণে px এর সাথে ফন্ট-আকার নির্ধারণের প্রস্তাব দেওয়া হয় না :

"ফন্টের আকারকে পিক্সে সংজ্ঞায়িত করা যায় না, কারণ ব্যবহারকারী কিছু ব্রাউজারে ফন্টের আকার পরিবর্তন করতে পারে না example উদাহরণস্বরূপ, সীমাবদ্ধ দৃষ্টিযুক্ত ব্যবহারকারীরা কোনও ওয়েব ডিজাইনারের দ্বারা নির্বাচিত আকারের চেয়ে ফন্টের আকারটি সেট করতে চাইতে পারেন" " ( https://developer.mozilla.org/en-US/docs/Web/CSS/font-size দেখুন )

আরও অ্যাক্সেসযোগ্য পন্থাটি font-size: 100%এইচটিএমএলতে সেট করা থাকে যা ব্যবহারকারীর ডিফল্ট আকারের সেটিংসকে সম্মান করে এবং পুনরায় আকার দেওয়ার সময় শতাংশ বা আপেক্ষিক ইউনিট ব্যবহার করে ( emবা rem) উদাহরণস্বরূপ @ মিডিয়া ক্যোয়ারী দিয়ে।

( https://betterwebtype.com/articles/2019/06/16/5-keys-to-accessible-web-typography/ দেখুন )

Question 11

হ্যাঁ, এসভিজিতে কিছু ব্রাউজারের কিছু বিধিনিষেধ রয়েছে seems বিকাশকারী এটি 8000px এ সীমাবদ্ধ করে; নিম্নলিখিত গতিশীলভাবে উত্পন্ন চার্টটি ক্রোমে উদাহরণস্বরূপ ব্যর্থ।

ব্যবহার করে দেখুন http://www.xn--dddelei-n2a.de/2018/test-von-svt/

<svg id="diagrammChart"
     width="100%"
     height="100%"
     viewBox="-400000 0 1000000 550000"
     font-size="27559"
     overflow="hidden"
     preserveAspectRatio="xMidYMid meet"
>
    <g class="hover-check">
        <text class="hover-toggle" x="-16800" y="36857.506818182" opacity="1" height="24390.997159091" width="953959" font-size="27559">
            <set attributeName="opacity" to="1" begin="ExampShow56TestBarRect1.touchstart"
                 end="ExampShow56TestBarRect1.touchend">
            </set>
            <set attributeName="opacity" to="1" begin="ExampShow56TestBarRect1.mouseover"
                 end="ExampShow56TestBarRect1.mouseout">
            </set>
            Heinz: -16800
        </text>
        <rect class="hover-rect" x="-16800" y="12466.509659091" width="16800" height="24390.997159091" fill="darkred">
            <set attributeName="opacity" to="0.1" begin="ExampShow56TestBarRect1.mouseover"
                 end="ExampShow56TestBarRect1.mouseout">
            </set>
            <set attributeName="opacity" to="0.1" begin="ExampShow56TestBarRect1.touchstart"
                 end="ExampShow56TestBarRect1.touchend">
            </set>
        </rect>
        <rect id="ExampShow56TestBarRect1" x="-384261" y="0" width="953959" height="48781.994318182"
              opacity="0">
        </rect>

    </g>
</svg>

Question 12

সিএসএস মিনিট () এবং সর্বোচ্চ () এর 2020 সালে মোটামুটি ভাল ব্যবহারের হার রয়েছে।

নীচের কোডটি সর্বাধিক [পরিবর্তনশীল] এবং [সর্বনিম্নমূল্য] পেতে সর্বাধিক () ব্যবহার করে এবং তারপরে দুটিটির আরও ছোট পেতে [সর্বোচ্চতম] এর বিপরীতে নূন্যতম () এর মধ্য দিয়ে যায়। এটি একটি অনুমোদিত ফন্টের পরিসীমা তৈরি করে (3.5 মিমি সর্বনিম্ন, 6.5 মিমি সর্বাধিক, 6 ভিডব্লু কেবল তখনই ব্যবহৃত হয়)।

font-size: min(max([variablevalue], [minimumvalue]), [maximumvalue]);
font-size: min(max(6vw, 3.5rem), 6.5rem);

আমি এটি বুটস্ট্র্যাপ ধারক উপাদান যেখানে সর্বাধিক প্রস্থ সেট করা আছে এর মধ্যে একটি চিত্রের উপরে একটি ভিডিও-প্লে আইকন হিসাবে ফন্ট-অসাধারণ সাথে ব্যবহার করছি using