আমি কীভাবে আমার সাইটে একটি এসভিজি চিত্রে একটি কাস্টম ফন্ট ব্যবহার করব?

Question

আমি ইনস্কেপ ব্যবহার করে একটি কাস্টম ফেসবুক আইকন তৈরি করেছি এবং এটি একটি এসভিজি হিসাবে সংরক্ষণ করেছি। এটি আমার পৃষ্ঠার শিরোনামের মতো একই ফন্টটি ব্যবহার করে, যা "উবুন্টুটিটলিং-বোল্ড-ওয়েবফন্ট" ফন্টটি ব্যবহার করে, যা আমি সিএসএস ফাইলে একটি .ওফ হিসাবে উল্লেখ করেছি। শিরোনামটি ফাংশন করে, তবে এসভিজি এটি করে না - এটি কোনও ধরণের ডিফল্ট ফন্টে "f" প্রদর্শন করে। ফন্ট ফাইলটি সিএসএস এবং চিত্রের ফাইলের সাথে আপেক্ষিকতায় ../fouts/ubuntutitling-bold-webfont.woff এ এবং ওয়েব পৃষ্ঠার আপেক্ষিকতায় ফন্ট / উবুন্টিটলিং-বোল্ড-ওয়েবফন্ট.উফ এ অবস্থিত।

আমি কীভাবে গুগল ওয়েব ফন্টকে এসভিজিতে এম্বেড করব? , তবে এসভিজিতে কোডটি কীভাবে প্রয়োগ করতে হবে তা সম্পর্কে আমি কিছুটা বিভ্রান্ত, যদি আমার এমনকি প্রয়োজন হয়। এসভিজি কি সিএসএস ফাইলে রেফারেন্স করা .ওফ ফন্ট ব্যবহার করতে পারে? এসভিজি ফাইলের অভ্যন্তরে আমি কীভাবে ফন্টটি পরিবর্তন করেছি?

এসভিজির কোড এখানে:

    <?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->

<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
   width="80"
   height="80"
   id="svg2"
   version="1.1"
   inkscape:version="0.48.3.1 r9886"
   sodipodi:docname="New document 1">
  <defs
     id="defs4" />
  <sodipodi:namedview
     id="base"
     pagecolor="#ffffff"
     bordercolor="#666666"
     borderopacity="1.0"
     inkscape:pageopacity="0.0"
     inkscape:pageshadow="2"
     inkscape:zoom="1"
     inkscape:cx="26.573808"
     inkscape:cy="42.478414"
     inkscape:document-units="px"
     inkscape:current-layer="layer1"
     showgrid="false"
     fit-margin-top="0"
     fit-margin-left="0"
     fit-margin-right="0"
     fit-margin-bottom="0"
     inkscape:window-width="1619"
     inkscape:window-height="611"
     inkscape:window-x="165"
     inkscape:window-y="301"
     inkscape:window-maximized="0" />
  <metadata
     id="metadata7">
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title></dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0.75006053,-981.36219)">
    <rect
       style="fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:10;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0"
       id="rect2987"
       width="70"
       height="70"
       x="4.2499394"
       y="986.36218"
       rx="10"
       ry="10" />
    <text
       xml:space="preserve"
       style="font-size:109.44319916px;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;line-height:125%;letter-spacing:0px;word-spacing:0px;fill:#ffffff;fill-opacity:1;stroke:#fffffe;stroke-width:2.73607969;stroke-opacity:1;font-family:ubuntutitling-bold-webfont';-inkscape-font-specification:ubuntutitling-bold-webfont'"
       x="25.989071"
       y="1096.0118"
       id="text3757"
       sodipodi:linespacing="125%"
       transform="scale(1.0381556,0.96324674)"><tspan
         sodipodi:role="line"
         id="tspan3759"
         x="25.989071"
         y="1096.0118"
         style="stroke-width:2.73607969">f</tspan></text>
  </g>
</svg>

তুমাকে অগ্রিম ধন্যবাদ.

Comments

আপনি কীভাবে এসভিজি প্রদর্শন করবেন? আপনি কি এটি একটি <img> হিসাবে লোড করেন, আপনি কি এটি কোনও বস্তু হিসাবে এম্বেড করেন বা আপনি এসভিজি ইনলাইনটি প্রদর্শন করেন?

— ভাবলিপি

Answer 1

আপনাকে defsবিভাগে সিএসএস লাগাতে হবে । কিছুটা এইরকম:

<defs>
  <style type="text/css">
    @font-face {
      font-family: Delicious;
      src: url('../fonts/font.woff');
    }
  </style>
</defs>

Comments

আমার উদাহরণ অনুযায়ী github.com/marians/test-webfouts-in-svg , এটি বর্তমান ব্রাউজারগুলির সাথে কাজ করে না (ফেব্রুয়ারী 2016)।

— মারিয়ান

আপনি যদি <object>এসভিজি এম্বেড করার পরিবর্তে ব্যবহার করেন <img>তবে ফন্টটি সঠিকভাবে লোড হয়! github.com/marians/test-webfouts-in-svg/pull/1

— ওয়ালডিরিয়াস

@ ওয়াল্ডরিয়াস এই টিপটির জন্য বিশ্বে পর্যাপ্ত পরিমাণে উত্সাহ নেই।

— স্ক্রিবলমাচার

@ ওয়াল্ডরিয়াস যদি এসভিজি একটি পটভূমি চিত্র হয়?

— notacouch

ব্যবহার <object>কিছু মূল্যবান হয়েছে। Vecta.io/blog/best-way-to-e એમ્બેડ-svg পর্যালোচনা করার পরে আমি ঠিক করেছি আমার ডকুমেন্টের মধ্যে এসভিজি মার্কআপটি ইনলাইন করার সিদ্ধান্ত নিয়েছে।

— হারমান জে রাডটকে III

Answer 2

এসভিজি ফাইলে গুগল বা অন্য কোনও বাহ্যিক ফরেন্ট লোড করতে, আমাদের নীচে ডিফস ট্যাগে স্টাইল ট্যাগ যুক্ত করতে হবে:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="246" height="272" xml:space="preserve"><desc>Your description</desc>

<defs>
<style type="text/css">@import url('http://fonts.googleapis.com/css?family=Lobster|Fontdiner+Swanky|Crafty+Girls|Pacifico|Satisfy|Gloria+Hallelujah|Bangers|Audiowide|Sacramento');</style>
</defs>

Comments

আমার উদাহরণ অনুযায়ী github.com/marians/test-webfouts-in-svg , এটি বর্তমান ব্রাউজারগুলির সাথে কাজ করে না (ফেব্রুয়ারী 2016)।

— মারিয়ান

Answer 3

সম্পাদনা: আমি আপনার প্রশ্নটি আবার পড়ছি ... মনে হচ্ছে আপনার সেরা বিকল্পটি আপনার আইকনের পাঠ্যটিকে একটি রূপরেখায় রূপান্তর করা হতে পারে, সুতরাং এটির কোনও ফন্টের প্রয়োজন নেই। (এটি ঠিক আছে কিনা তা দেখতে আপনাকে আপনার ফন্ট লাইসেন্স পরীক্ষা করতে হবে))

আমি ধরে নিয়েছি, ভুলভাবে, আপনার কাছে একটি ভেক্টর আইকন ছিল এবং আপনি এটি আপনার ওয়েবসাইটে প্রদর্শন করার জন্য সেরা উপায়টির সন্ধান করছেন।

---

আমার মনে হয় আপনার কাছে কয়েকটি বিকল্প রয়েছে।

একটি এসভিজি চিত্র ব্যবহার করুন

আপনি কেবলমাত্র একটি চিত্র হিসাবে এসভিজি ব্যবহার করতে পারেন। আপনি IE এর পুরানো সংস্করণগুলির জন্য সমর্থন হারাবেন, তবে আপনি IE8 এবং এর আগে পিএনজি বা জিআইএফ পরিবর্তন করতে পারেন। বা IE8 এবং পুরানো সমর্থন সম্পর্কে বিরক্ত করবেন না (আপনার লক্ষ্য দর্শকের উপর নির্ভর করে কোনও বিকল্প হতে পারে বা নাও হতে পারে)।

ফন্ট কাঠবিড়ালি এর জেনারেটর ব্যবহার করুন

ফন্ট কাঠবিড়ালিতে একটি ফন্ট-ফেস জেনারেটর রয়েছে যা আপনার জন্য ইতিমধ্যে ফন্টটি তৈরি করে থাকলে আপনার জন্য সমস্ত ভারী উত্তোলন করে।

ফন্ট কাঠবিড়ালি @ ফন্ট-মুখ জেনারেটর

একটি পিএনজি চিত্র ব্যবহার করুন

আপনি এসভিজি ব্যবহার করছেন কেন? এটি কি আরও ভাল জুম এবং উচ্চ ডিপিআই সমর্থন জন্য? যদি তা হয় তবে সিএসএস এবং পিএনজি সহ এটি করার উপায় রয়েছে। এটি সত্যই আপনার ব্যবহারের উপর নির্ভর করে।

---

আমি ফন্টে আইকনগুলি এম্বেড করার ভক্ত নই। আপনি পিক্সেল স্তর নিয়ন্ত্রণ হারিয়েছেন। এমন কয়েকটি পরিস্থিতি রয়েছে যেখানে এটি করা ভাল পছন্দ, তবে প্রায়শই এটির পক্ষে আরও বেশি প্রচেষ্টা করা হয় যে এটির পক্ষে মূল্যবান এবং খারাপ ফলাফল দেয়।

Answer 4

<defs>
 <style type="text/css">
 <![CDATA[
  @font-face {
    font-family: 'Fredoka One';
    font-style: normal;
    font-weight: 400;
    src: local('Fredoka One'), local('FredokaOne-Regular'), 
    url(https://fonts.gstatic.com/s/fredokaone/v7/k3kUo8kEI- 
    tA1RRcTZGmTlHGCac.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, 
    U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, 
    U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  }
  ]]>
 </style>
</defs>

এটি নিম্নলিখিত ফন্টের জন্য একটি উদাহরণ। https://fouts.googleapis.com/css?family=Fredoka ওপেন ফন্ট পৃষ্ঠাতে যান এবং "ডিফস" এ সমস্ত কিছু অনুলিপি করুন

Comments

জিডিএসই তে স্বাগতম! লিঙ্কটি আমার পক্ষে কোথাও নেই, আপনি কি দয়া করে প্রাসঙ্গিক তথ্য যুক্ত করতে আপনার উত্তর সম্পাদনা করতে পারেন?

— জানতে আগ্রহী